/* =========================================================
   FOCO CREATIVO
   Estilos generales
========================================================= */

:root {
    --color-bg: #0d1117;

    --color-surface: #151b23;
    --color-surface-soft: #1b222c;
    --color-surface-light: #202833;

    --color-text: #f4f7fb;
    --color-text-secondary: #c2cad5;
    --color-text-muted: #a8b2c1;

    --color-primary: #17b890;
    --color-primary-hover: #22c99d;

    --color-primary-soft: rgba(23, 184, 144, 0.10);

    --color-border: rgba(255, 255, 255, 0.09);

    --container-width: 1200px;

    --header-height: 90px;

    --transition: 0.3s ease;

    --color-accent-cyan: #3cc7d6;
    --color-accent-blue: #6f8cff;
    --color-accent-warm: #f2b36d;

    --color-glow-green: rgba(23, 184, 144, 0.20);
    --color-glow-cyan: rgba(60, 199, 214, 0.16);
    --color-glow-blue: rgba(111, 140, 255, 0.14);

    --color-accent-cyan: #3cc7d6;
    --color-accent-blue: #6f8cff;

    --color-glow-green: rgba(23, 184, 144, 0.20);
    --color-glow-cyan: rgba(60, 199, 214, 0.16);
    --color-glow-blue: rgba(111, 140, 255, 0.14);
}


/* =========================================================
   Reset
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg);
    color: var(--color-text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   Contenedor general
========================================================= */

.section-container {
    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin: 0 auto;
}


/* =========================================================
   Header
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 90px;

    display: flex;
    align-items: center;

    z-index: 1000;

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

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter:
        blur(22px) saturate(160%);

    -webkit-backdrop-filter:
        blur(22px) saturate(160%);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12);

    transition:
        height 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        backdrop-filter 0.3s ease;
}

.site-header::before {
    content: '';

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.025) 100%
        );

    z-index:
        -1;
}

.site-header.is-scrolled {
    height: 64px;

    background:
        rgba(13, 17, 23, 0.88);

    border-bottom-color:
        var(--color-border);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   Navbar
========================================================= */

.navbar {
    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin: 0 auto;

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

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    display: block;

    width: auto;
    height: 58px;

    object-fit: contain;

    transition:
        height 0.3s ease,
        transform 0.3s ease;
}

.site-header.is-scrolled .brand-logo {
    height: 42px;
}


/* =========================================================
   Navegación escritorio
========================================================= */

.nav-menu {
    display: flex;
    align-items: center;

    gap: 32px;
}

.nav-menu a {
    position: relative;

    padding: 8px 0;

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

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

    transition:
        color 0.25s ease;
}

.nav-menu a::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 100%;
    height: 1px;

    background:
        var(--color-primary);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 0.25s ease;
}

.nav-menu a:hover {
    color:
        var(--color-text);
}

.nav-menu a:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}

/* Página activa */

.nav-menu a.active {
    color:
        var(--color-text);
}

.nav-menu a.active::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* =========================================================
   Botón menú móvil
========================================================= */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    position: relative;

    border: 0;

    background:
        transparent;

    cursor: pointer;

    z-index: 1100;
}

.menu-toggle span {
    position: absolute;

    left: 8px;

    width: 26px;
    height: 1px;

    background:
        var(--color-text);

    transition:
        top 0.3s ease,
        transform 0.3s ease;
}

.menu-toggle span:first-child {
    top: 16px;
}

.menu-toggle span:last-child {
    top: 25px;
}

.menu-toggle.is-active span:first-child {
    top: 21px;

    transform:
        rotate(45deg);
}

.menu-toggle.is-active span:last-child {
    top: 21px;

    transform:
        rotate(-45deg);
}


/* =========================================================
   Menú móvil
========================================================= */

.mobile-menu {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(23, 184, 144, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 88%,
            rgba(60, 199, 214, 0.055),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(10, 15, 21, 0.995),
            rgba(13, 23, 29, 0.995)
        );

    backdrop-filter:
        blur(24px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(130%);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px);

    z-index: 1050;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-logo {
    position: relative;

    display: flex;

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

    width: 60%;

    max-width: 210px;

    margin:
        18px auto 28px;

    opacity: 0;

    transform:
        translateY(14px);

    transition:
        opacity 0.5s ease 0.34s,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.34s;
}


.mobile-menu.is-open .mobile-menu-logo {
    opacity: 1;

    transform:
        translateY(0);
}


.mobile-menu-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 18px rgba(23, 184, 144, 0.12)
        );
}


/* Decoración tecnológica de fondo */

.mobile-menu::before {
    content: '';

    position: absolute;

    right: -110px;
    top: 24%;

    width: 280px;
    height: 280px;

    border:
        1px solid rgba(60, 199, 214, 0.055);

    transform:
        rotate(45deg);

    pointer-events: none;
}


.mobile-menu::after {
    content: '';

    position: absolute;

    left: -80px;
    bottom: 8%;

    width: 190px;
    height: 190px;

    border:
        1px solid rgba(23, 184, 144, 0.045);

    transform:
        rotate(45deg);

    pointer-events: none;
}


/* Estado abierto */

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* Contenedor */

.mobile-menu-inner {
    position: relative;

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

    height: 100%;

    margin:
        0 auto;

    padding:
        100px 0 24px;

    display: flex;
    flex-direction: column;

    justify-content:
        space-between;

    z-index: 2;
}

/* =========================================================
   Links navegación móvil
========================================================= */

.mobile-nav {
    display: flex;
    flex-direction: column;

    width: 100%;
}


.mobile-nav a {
    position: relative;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 12px;

    min-height: 56px;

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

    opacity: 0;

    transform:
        translateY(22px);

    transition:
        color 0.35s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s ease;
}


/* Entrada escalonada */

.mobile-menu.is-open .mobile-nav a {
    opacity: 1;

    transform:
        translateY(0);
}


.mobile-menu.is-open .mobile-nav a:nth-child(1) {
    transition-delay:
        0.08s;
}


.mobile-menu.is-open .mobile-nav a:nth-child(2) {
    transition-delay:
        0.13s;
}


.mobile-menu.is-open .mobile-nav a:nth-child(3) {
    transition-delay:
        0.18s;
}


.mobile-menu.is-open .mobile-nav a:nth-child(4) {
    transition-delay:
        0.23s;
}


.mobile-menu.is-open .mobile-nav a:nth-child(5) {
    transition-delay:
        0.28s;
}


.mobile-menu.is-open .mobile-nav a:nth-child(6) {
    transition-delay:
        0.33s;
}

.mobile-nav-index {
    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.16em;

    color:
        rgba(168, 178, 193, 0.48);

    transition:
        color 0.35s ease;
}

.mobile-nav-label {
    position: relative;

    width:
        fit-content;

    font-size:
        clamp(
            27px,
            6.5vw,
            29px
        );

    font-weight:
        500;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;
}


/* Línea sutil bajo el nombre */

.mobile-nav-arrow {
    justify-self:
        end;

    font-size:
        16px;

    color:
        rgba(168, 178, 193, 0.35);

    opacity:
        0;

    transform:
        translate(-8px, 8px);

    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.35s ease;
}

/* Hover */

.mobile-nav a:hover {
    color:
        var(--color-text);

    transform:
        translateX(7px);
}


.mobile-nav a:hover .mobile-nav-index {
    color:
        var(--color-primary);
}


.mobile-nav a:hover .mobile-nav-arrow {
    opacity:
        1;

    transform:
        translate(0, 0);

    color:
        var(--color-accent-cyan);
}


/* Página activa */

.mobile-nav a.active {
    color:
        var(--color-primary);
}


.mobile-nav a.active .mobile-nav-index {
    color:
        var(--color-primary);
}


.mobile-nav a.active .mobile-nav-arrow {
    opacity:
        1;

    transform:
        translate(0, 0);

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

/* =========================================================
   Partículas Home
========================================================= */

.home-particles {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 20;

    opacity: 0.9;

    mix-blend-mode: screen;
}

.hero-content,
.home-intro .section-container,
.services-section .section-container,
.why-section .section-container,
.process-section .section-container,
.cta-section .section-container {
    position: relative;

    z-index: 30;
}

main {
    position: relative;
    z-index: 1;
}

.hero,
.home-intro,
.services-section,
.why-section,
.process-section,
.cta-section {
    position: relative;
}

/* =========================================================
   Hero home
========================================================= */

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding-top: 90px;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #101820 0%,
            #0d1117 52%,
            #10151d 100%
        );
}

.hero::before {
    content: '';

    position: absolute;

    width: 760px;
    height: 760px;

    top: -300px;
    right: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.18) 0%,
            rgba(23, 184, 144, 0.07) 38%,
            transparent 72%
        );

    pointer-events: none;
}

.hero::after {
    content: '';

    position: absolute;

    width: 680px;
    height: 680px;

    left: -260px;
    bottom: -320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(111, 140, 255, 0.11) 0%,
            rgba(60, 199, 214, 0.05) 42%,
            transparent 72%
        );

    pointer-events: none;
}

.hero-content {
    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin: 0 auto;

    display: grid;

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

    gap: 80px;

    align-items: center;

    position: relative;
    z-index: 1;
}

.hero-copy {
    max-width: 760px;
}

.hero-eyebrow {
    display: inline-block;

    margin-bottom: 24px;

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

    letter-spacing:
        0.2em;

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

.hero h1 {
    max-width: 900px;

    font-size:
        clamp(
            54px,
            6.5vw,
            92px
        );

    line-height: 0.98;

    letter-spacing:
        -0.045em;
}

.hero h1 span {
    display: block;

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

.hero p {
    max-width: 650px;

    margin-top: 32px;

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

    color:
        var(--color-text-muted);
}


/* =========================================================
   Hero visual
========================================================= */

.hero-visual {
    position: relative;

    width: 100%;

    aspect-ratio:
        1 / 1;

    max-width: 520px;

    justify-self:
        end;
}

.hero-visual::before {
    content: '';

    position: absolute;

    inset: 12%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.10) 0%,
            rgba(60, 199, 214, 0.07) 38%,
            rgba(111, 140, 255, 0.04) 58%,
            transparent 75%
        );

    filter:
        blur(8px);

    pointer-events:
        none;
}

.visual-grid {
    position: absolute;

    inset: 0;

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

    background-size:
        42px 42px;

    mask-image:
        radial-gradient(
            circle,
            black 25%,
            transparent 72%
        );
}

/* =========================================================
   Órbitas Hero
========================================================= */

.visual-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    pointer-events: none;
}

.visual-orbit-1 {
    width: 72%;
    height: 72%;

    border:
        1px solid rgba(60, 199, 214, 0.24);
}

.visual-orbit-2 {
    width: 95%;
    height: 95%;

    border:
        1px solid rgba(111, 140, 255, 0.20);
}

/* =========================================================
   Rotores orbitales
========================================================= */

.orbit-rotor {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    transform-origin:
        center;

    pointer-events: none;
}


/* Órbita interior */

.orbit-rotor-inner {
    animation:
        orbitRotateInner 10s linear infinite;
}


/* Órbita exterior */

.orbit-rotor-outer {
    animation:
        orbitRotateOuter 14s linear infinite;
}


/* Órbita exterior en sentido contrario */

.orbit-rotor-outer-reverse {
    animation:
        orbitRotateOuterReverse 19s linear infinite;
}


/* =========================================================
   Puntos orbitales
========================================================= */

.orbit-runner {
    position: absolute;

    width: 11px;
    height: 11px;

    border-radius: 50%;

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

    z-index: 3;

    animation-name:
        orbitNodePulse;

    animation-duration:
        2.8s;

    animation-timing-function:
        ease-in-out;

    animation-iteration-count:
        infinite;

    .orbit-runner-1 {
        animation-delay:
            0s;
    }

    .orbit-runner-2 {
        animation-delay:
            0.7s;
    }

    .orbit-runner-3 {
        animation-delay:
            1.4s;
    }
}


.orbit-runner::before {
    content: '';

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border:
        1px solid currentColor;

    opacity: 0.34;
}


/* Punto verde - arriba */

.orbit-runner-1 {
    left: 50%;
    top: 0;

    color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px var(--color-glow-green),
        0 0 34px rgba(23, 184, 144, 0.18);
}


/* Punto cian - derecha */

.orbit-runner-2 {
    left: 100%;
    top: 50%;

    color:
        var(--color-accent-cyan);

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 18px var(--color-glow-cyan),
        0 0 34px rgba(60, 199, 214, 0.18);
}


/* Punto azul - abajo */

.orbit-runner-3 {
    left: 50%;
    top: 100%;

    color:
        var(--color-accent-blue);

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 18px var(--color-glow-blue),
        0 0 34px rgba(111, 140, 255, 0.16);
}


/* =========================================================
   Marcas luminosas orbitales
========================================================= */

.orbit-mark {
    position: absolute;

    width: 24px;
    height: 2px;

    border-radius: 999px;

    background:
        currentColor;

    opacity: 0.58;

    box-shadow:
        0 0 10px currentColor;
}


/* Interior */

.orbit-mark-1 {
    top: 8%;
    left: 25%;

    color:
        var(--color-primary);

    transform:
        rotate(-28deg);
}


.orbit-mark-2 {
    right: 8%;
    bottom: 28%;

    color:
        var(--color-accent-cyan);

    transform:
        rotate(55deg);
}


/* Exterior */

.orbit-mark-3 {
    top: 20%;
    right: 4%;

    color:
        var(--color-accent-cyan);

    transform:
        rotate(68deg);
}


.orbit-mark-4 {
    bottom: 13%;
    left: 18%;

    color:
        var(--color-accent-blue);

    transform:
        rotate(-48deg);
}


/* Órbita interior */

.orbit-mark-1 {
    color:
        var(--color-primary);

    top: 12%;
    left: 49%;
}

.orbit-mark-2 {
    color:
        var(--color-accent-cyan);

    bottom: 15%;
    right: 10%;

    transform:
        rotate(34deg);
}


/* Órbita exterior */

.orbit-mark-3 {
    color:
        var(--color-accent-blue);

    top: 25%;
    right: 3%;

    transform:
        rotate(64deg);
}

.orbit-mark-4 {
    color:
        var(--color-accent-cyan);

    bottom: 10%;
    left: 20%;

    transform:
        rotate(-42deg);
}

.visual-orbit-1 {
    width: 72%;
    height: 72%;

    border-color:
        rgba(60, 199, 214, 0.22);

    animation:
        visualOrbitOne 22s linear infinite;
}

.visual-orbit-2 {
    width: 95%;
    height: 95%;

    border-color:
        rgba(111, 140, 255, 0.18);

    animation:
        visualOrbitTwo 32s linear infinite reverse;
}

.visual-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 190px;
    height: 190px;

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

    display: flex;

    justify-content:
        center;

    align-items:
        center;

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

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.12),
            rgba(60, 199, 214, 0.05),
            rgba(111, 140, 255, 0.035)
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 0 60px rgba(23, 184, 144, 0.09)
        0 30px 80px rgba(0, 0, 0, 0.30);

    animation:
        visualCoreFloat 5.5s ease-in-out infinite,
        visualCoreTilt 9s ease-in-out infinite;

    isolation:
        isolate;
}

.visual-core::before {
    content: '';

    position: absolute;

    inset: 18px;

    border:
        1px solid rgba(60, 199, 214, 0.40);
    
    animation:
        visualCoreBorder 4s ease-in-out infinite;
}

.visual-core::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 170%;
    height: 170%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.13) 0%,
            rgba(60, 199, 214, 0.06) 38%,
            rgba(111, 140, 255, 0.025) 58%,
            transparent 74%
        );

    filter:
        blur(18px);

    z-index:
        -1;

    animation:
        visualCoreGlow 4.8s ease-in-out infinite;

    pointer-events:
        none;
}

.visual-core-logo {
    display: block;

    width: 62%;
    height: auto;

    object-fit: contain;

    position: relative;
    z-index: 2;

    filter:
        drop-shadow(
            0 0 16px rgba(23, 184, 144, 0.24)
        );

    animation:
        visualLogoPulse 3.8s ease-in-out infinite;
}

.visual-node {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 22px rgba(23, 184, 144, 0.65);
}

.visual-node-1 {
    top: 17%;
    left: 52%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 26px var(--color-glow-green);

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

.visual-node-2 {
    right: 10%;
    bottom: 32%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 26px var(--color-glow-cyan);
    animation:
        visualNodeFloatOne 6.5s ease-in-out infinite;
}

.visual-node-3 {
    left: 9%;
    bottom: 24%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 26px var(--color-glow-blue);

    animation:
        visualNodeFloatOne 5.8s ease-in-out infinite;
}


/* =========================================================
   Botones
========================================================= */

.hero-actions {
    display: flex;

    gap: 14px;

    margin-top: 40px;
}

.btn {
    display: inline-flex;

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

    min-height: 48px;

    padding:
        0 24px;

    border:
        1px solid transparent;

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

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

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

.btn-primary {
    background:
        var(--color-primary);

    color:
        #07130f;
}

.btn-primary:hover {
    background:
        var(--color-primary-hover);
}

.btn-secondary {
    border-color:
        var(--color-border);

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

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

.btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.07);
}


/* =========================================================
   Secciones comunes
========================================================= */

.section-kicker {
    display: block;

    margin-bottom: 18px;

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

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

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

.section-heading {
    max-width: 760px;

    margin-bottom: 90px;
}

.section-heading h2 {
    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.section-heading p {
    max-width: 650px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}


/* =========================================================
   Home intro
========================================================= */

.home-intro {
    padding:
        140px 0;

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

    background:
        linear-gradient(
            180deg,
            #22303c 0%,
            #1b2630 100%
        );
}

.home-intro h2 {
    max-width: 760px;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.home-intro p {
    max-width: 680px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

/* =========================================================
   Home intro - Composición tecnológica
========================================================= */

.home-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.8fr);

    gap: 100px;

    align-items: center;
}

.home-intro-copy {
    max-width: 720px;
}


/* =========================================================
   Home intro - Visual tecnológico
========================================================= */

.tech-visual {
    position: relative;

    width: 100%;
    max-width: 520px;

    aspect-ratio: 1 / 1;

    justify-self: end;

    isolation: isolate;
}


/* =========================================================
   Halo ambiental
========================================================= */

.tech-visual::before {
    content: '';

    position: absolute;

    inset: 12%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.12) 0%,
            rgba(60, 199, 214, 0.06) 38%,
            rgba(111, 140, 255, 0.035) 56%,
            transparent 74%
        );

    filter: blur(16px);

    pointer-events: none;

    z-index: -2;
}

/* =========================================================
   Matriz de puntos HUD
========================================================= */

.tech-dot-field {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 72%;
    height: 72%;

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

    opacity: 0.52;

    background-image:
        radial-gradient(
            circle,
            rgba(60, 199, 214, 0.58) 1.2px,
            transparent 1.4px
        );

    background-size:
        14px 14px;

    mask-image:
        radial-gradient(
            circle,
            black 28%,
            rgba(0, 0, 0, 0.85) 54%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 28%,
            rgba(0, 0, 0, 0.85) 54%,
            transparent 78%
        );

    animation:
        techDotFieldPulse 4.5s ease-in-out infinite;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   Órbitas
========================================================= */

.tech-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    pointer-events: none;
}

.tech-orbit-outer {
    width: 92%;
    height: 92%;

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

.tech-orbit-inner {
    width: 68%;
    height: 68%;

    border:
        1px solid rgba(60, 199, 214, 0.18);
}


/* =========================================================
   Marcos geométricos
========================================================= */

.tech-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    transform-origin: center;

    pointer-events: none;
}

.tech-frame-outer {
    width: 64%;
    height: 64%;

    border:
        1px solid rgba(60, 199, 214, 0.78);

    box-shadow:
        0 0 18px rgba(60, 199, 214, 0.08);

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    animation:
        techFrameOuter 28s linear infinite;
}

.tech-frame-middle {
    width: 44%;
    height: 44%;

    border:
        1px solid rgba(23, 184, 144, 0.82);

    box-shadow:
        0 0 18px rgba(23, 184, 144, 0.08);

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    animation:
        techFrameMiddle 22s linear infinite reverse;
}


/* =========================================================
   Núcleo
========================================================= */

.tech-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 34%;
    aspect-ratio: 1 / 1;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.13),
            rgba(60, 199, 214, 0.05),
            rgba(111, 140, 255, 0.025)
        );

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

    box-shadow:
        0 0 55px rgba(23, 184, 144, 0.10),
        0 24px 60px rgba(0, 0, 0, 0.30);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tech-core-frame {
    width: 78%;
    height: 78%;

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

    border:
        1px solid rgba(23, 184, 144, 0.48);
}

.tech-core-logo {
    display: block;

    width: 64%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 14px rgba(23, 184, 144, 0.18)
        );
}


/* =========================================================
   Nodos
========================================================= */

.tech-node {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

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

    z-index: 3;
}

.tech-node::before {
    content: '';

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border:
        1px solid currentColor;

    opacity: 0.42;
}

.tech-node-top {
    left: 50%;
    top: 7%;

    color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 0 22px var(--color-glow-green);

    filter:
        drop-shadow(
            0 0 8px currentColor
        );
}

.tech-node-right {
    left: 93%;
    top: 50%;

    color:
        var(--color-accent-cyan);

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 22px var(--color-glow-cyan);

    filter:
        drop-shadow(
            0 0 8px currentColor
        );
}

.tech-node-bottom {
    left: 50%;
    top: 93%;

    color:
        var(--color-accent-blue);

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 22px var(--color-glow-blue);

    filter:
        drop-shadow(
            0 0 8px currentColor
        );
}

.tech-node-left {
    left: 7%;
    top: 50%;

    color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 0 22px var(--color-glow-green);

    filter:
        drop-shadow(
            0 0 8px currentColor
        );
}


/* =========================================================
   Ejes
========================================================= */

.tech-axis {
    position: absolute;

    z-index: 1;

    opacity: 0.8;
}

.tech-axis-top,
.tech-axis-bottom {
    left: 50%;

    width: 1px;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(60, 199, 214, 0.78) 0px,
            rgba(60, 199, 214, 0.78) 6px,
            transparent 6px,
            transparent 11px
        );
}

.tech-axis-top {
    top: 8%;

    height: 28%;

    transform:
        translateX(-50%);
}

.tech-axis-bottom {
    bottom: 8%;

    height: 28%;

    transform:
        translateX(-50%);
}

.tech-axis-left,
.tech-axis-right {
    top: 50%;

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.78) 0px,
            rgba(60, 199, 214, 0.78) 6px,
            transparent 6px,
            transparent 11px
        );
}

.tech-axis-left {
    left: 8%;

    width: 28%;

    transform:
        translateY(-50%);
}

.tech-axis-right {
    right: 8%;

    width: 28%;

    transform:
        translateY(-50%);
}


/* =========================================================
   Detalles HUD
========================================================= */

.tech-detail {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    opacity: 0.65;

    animation:
        techDetailPulse 3s ease-in-out infinite;
}

.tech-detail-1 {
    top: 30%;
    left: 22%;
}

.tech-detail-2 {
    top: 24%;
    right: 28%;

    animation-delay:
        0.6s;
}

.tech-detail-3 {
    bottom: 25%;
    right: 22%;

    animation-delay:
        1.2s;
}

.tech-detail-4 {
    bottom: 28%;
    left: 25%;

    animation-delay:
        1.8s;
}


/* =========================================================
   Animaciones
========================================================= */

@keyframes techFrameOuter {

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

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

}


@keyframes techFrameMiddle {

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

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

}


@keyframes techDetailPulse {

    0%,
    100% {
        opacity: 0.25;

        transform:
            scale(0.8);
    }

    50% {
        opacity: 0.9;

        transform:
            scale(1.35);
    }

}

@keyframes techDotFieldPulse {

    0%,
    100% {
        opacity: 0.30;

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

    50% {
        opacity: 0.62;

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

}


/* =========================================================
   Servicios Home
========================================================= */

.services-section {
    padding: 150px 0;

    background:
        linear-gradient(
            180deg,
            #0f141b 0%,
            var(--color-bg) 100%
        );

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

.services-list {
    border-top:
        1px solid var(--color-border);
}

.service-item {
    display: grid;

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

    gap: 40px;

    padding:
        55px 0;

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

    transition:
        background 0.3s ease,
        padding 0.3s ease;
}

.service-number {
    font-size: 13px;

    letter-spacing:
        0.15em;

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

.service-content {
    max-width: 900px;
}

.service-content h3 {
    font-size:
        clamp(
            30px,
            3vw,
            48px
        );

    line-height: 1.1;

    letter-spacing:
        -0.025em;
}

.service-content p {
    max-width: 700px;

    margin-top: 20px;

    font-size: 17px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

.service-link {
    display: inline-flex;

    align-items:
        center;

    gap: 10px;

    margin-top: 28px;

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

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

.service-link span {
    transition:
        transform 0.25s ease;
}

.service-link:hover span {
    transform:
        translateX(5px);
}

.service-item:hover {
    padding-left: 24px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.06),
            rgba(60, 199, 214, 0.02),
            transparent
        );
}

.service-item:hover .service-content h3 {
    color:
        var(--color-primary);
}

/* =========================================================
   Microdiagramas tecnológicos - Servicios
========================================================= */

.service-tech {
    position: absolute;

    right: 40px;
    top: 50%;

    width: 240px;
    height: 120px;

    transform: translateY(-50%);

    opacity: 0.9;

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

.service-item {
    position: relative;
    padding-right: 330px;
}

.service-item:hover .service-tech {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(-10px)
        scale(1.05);
}

/* =========================================================
   Desarrollo Web - Network
========================================================= */

.web-network {
    position: relative;

    width: 100%;
    height: 100%;
}

.web-node {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);

    z-index: 2;

    animation:
        serviceNodePulse 2.2s ease-in-out infinite;
}

.web-node-1 {
    left: 8%;
    top: 48%;
}

.web-node-2 {
    left: 42%;
    top: 20%;
}

.web-node-3 {
    left: 58%;
    top: 68%;
}

.web-node-4 {
    right: 7%;
    top: 38%;
}

.web-link {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.15),
            rgba(60, 199, 214, 0.75),
            rgba(60, 199, 214, 0.15)
        );

    transform-origin:
        left center;
}

.web-link-1 {
    width: 82px;

    left: 10%;
    top: 50%;

    transform:
        rotate(-20deg);
}

.web-link-2 {
    width: 76px;

    left: 44%;
    top: 24%;

    transform:
        rotate(47deg);
}

.web-link-3 {
    width: 78px;

    left: 60%;
    top: 70%;

    transform:
        rotate(-32deg);
}

/* =========================================================
   Aplicaciones - Arquitectura modular
========================================================= */

.apps-system {
    position: relative;

    width: 150px;
    height: 86px;

    margin:
        7px auto 0;
}

.apps-module {
    animation:
        appsModulePulse 3.2s ease-in-out infinite;
}

.apps-module-1 {
    animation-delay: 0s;
}

.apps-module-2 {
    animation-delay: 0.4s;
}

.apps-module-4 {
    animation-delay: 0.8s;
}

.apps-module-3 {
    animation-delay: 1.2s;
}

.apps-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 20px var(--color-glow-green);

    z-index: 3;

    animation:
        serviceCorePulse 2.2s
        ease-in-out
        infinite;
}

.apps-link {
    position: absolute;

    background:
        rgba(60, 199, 214, 0.35);
}

.apps-link-horizontal {
    left: 14px;
    right: 14px;

    top: 50%;

    height: 1px;
}

.apps-link-vertical {
    top: 14px;
    bottom: 14px;

    left: 50%;

    width: 1px;
}

/* =========================================================
   Aplicaciones - Señales de información
========================================================= */

.apps-signal {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 10px rgba(60, 199, 214, 0.80),
        0 0 22px rgba(60, 199, 214, 0.40);

    z-index: 4;
}


/* Señal horizontal */

.apps-signal-horizontal {
    left: 14px;
    top: 50%;

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

    animation:
        appsSignalHorizontal 3.4s
        ease-in-out
        infinite;
}


/* Señal vertical */

.apps-signal-vertical {
    left: 50%;
    top: 14px;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 10px rgba(23, 184, 144, 0.85),
        0 0 22px rgba(23, 184, 144, 0.42);

    animation:
        appsSignalVertical 3.4s
        ease-in-out
        infinite;

    animation-delay:
        0.85s;
}

/* =========================================================
   Automatización - Flujo
========================================================= */

.auto-flow {
    position: relative;

    width: 190px;
    height: 70px;

    margin:
        15px auto 0;
}

.auto-line {
    position: absolute;

    left: 10px;
    right: 10px;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.18),
            rgba(60, 199, 214, 0.70),
            rgba(111, 140, 255, 0.20)
        );
}

.auto-node {
    position: absolute;

    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

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

    background:
        #172129;

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

    z-index: 2;
}

.auto-node-1 {
    left: 6%;
}

.auto-node-2 {
    left: 35%;
}

.auto-node-3 {
    left: 65%;
}

.auto-node-4 {
    left: 94%;
}

.auto-signal {
    position: absolute;

    left: 6%;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px var(--color-glow-green);

    z-index: 4;

    animation:
        autoSignalFlow 4s ease-in-out infinite;
}

/* =========================================================
   Por qué Foco Creativo
========================================================= */

.why-section {
    padding: 150px 0;

    background:
        linear-gradient(
            180deg,
            #1c2b32 0%,
            #172229 100%
        );

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

.why-grid {
    display: grid;

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

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

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

.why-item {
    min-height: 310px;

    padding: 40px;

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

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

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.why-item:hover {
    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.05),
            rgba(60, 199, 214, 0.025)
        );

    transform:
        translateY(-4px);
}

.why-number {
    display: block;

    margin-bottom: 55px;

    font-size: 12px;

    letter-spacing:
        0.15em;

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

.why-item h3 {
    font-size: 24px;

    letter-spacing:
        -0.02em;
}

.why-item p {
    margin-top: 18px;

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

    line-height: 1.75;
}

/* =========================================================
   Microdiagramas - Por qué Foco Creativo
========================================================= */

.why-item {
    position: relative;
    overflow: hidden;
}

.why-tech {
    position: absolute;

    top: 34px;
    right: 34px;

    width: 90px;
    height: 70px;

    opacity: 0.62;

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

.why-item:hover .why-tech {
    opacity: 1;

    transform:
        scale(1.08);
}

.scale-box {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid rgba(23, 184, 144, 0.65);

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

.scale-box-1 {
    animation:
        scaleBoxPulse 3.2s ease-in-out infinite;
    width: 20px;
    height: 20px;
}

.scale-box-2 {
    animation:
        scaleBoxPulse 3.2s ease-in-out infinite;
    width: 38px;
    height: 38px;
}

.scale-box-3 {
    animation:
        scaleBoxPulse 3.2s ease-in-out infinite;

    animation-delay:
        0.7s;
    width: 58px;
    height: 58px;
}

.perf-line {
    position: absolute;

    left: 8px;

    width: 62px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-accent-cyan)
        );

    transform-origin:
        right center;
}

.perf-line-1 {
    animation:
        performanceLine 2.8s ease-in-out infinite;
    top: 18px;
    transform: rotate(18deg);
}

.perf-line-2 {
    animation:
        performanceLine 2.8s ease-in-out infinite;

    animation-delay:
        0.3s;

    top: 34px;
}

.perf-line-3 {
    animation:
        performanceLine 2.8s ease-in-out infinite;

    animation-delay:
        0.6s;

    top: 50px;
    transform: rotate(-18deg);
}

.perf-core {
    animation:
        performanceCorePulse 2.2s ease-in-out infinite;
    position: absolute;

    right: 8px;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    transform:
        translateY(-50%);

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);
}

.responsive-screen {
    position: absolute;

    bottom: 8px;

    border:
        1px solid rgba(111, 140, 255, 0.65);
}

.responsive-screen-1 {
    animation:
        responsiveScreenSmall 3.6s ease-in-out infinite;

    left: 8px;

    width: 18px;
    height: 30px;
}

.responsive-screen-2 {
    animation:
        responsiveScreenMedium 3.6s ease-in-out infinite;

    animation-delay:
        0.35s;

    left: 34px;

    width: 26px;
    height: 42px;
}

.responsive-screen-3 {
    animation:
        responsiveScreenLarge 3.6s ease-in-out infinite;

    animation-delay:
        0.7s;

    right: 4px;

    width: 34px;
    height: 54px;
}

.arch-node {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-primary);

    z-index: 2;
}

.arch-node-main {
    animation:
        architectureMainPulse 2.8s ease-in-out infinite;

    left: 50%;
    top: 8px;
}

.arch-node-1 {
    animation:
        architectureNodePulse 2.8s ease-in-out infinite;

    animation-delay:
        0.45s;

    left: 12px;
    bottom: 8px;
}

.arch-node-2 {
    animation:
        architectureNodePulse 2.8s ease-in-out infinite;

    animation-delay:
        0.9s;
        
    left: 50%;
    bottom: 8px;
}

.arch-node-3 {
    animation:
        architectureNodePulse 2.8s ease-in-out infinite;

    animation-delay:
        1.35s;

    right: 12px;
    bottom: 8px;
}

.arch-line {
    position: absolute;

    width: 1px;
    height: 50px;

    left: 50%;
    top: 12px;

    background:
        rgba(60, 199, 214, 0.35);

    transform-origin:
        top center;
}

.arch-line-1 {
    transform:
        rotate(38deg);
}

.arch-line-2 {
    transform:
        rotate(0deg);
}

.arch-line-3 {
    transform:
        rotate(-38deg);
}

.ux-path {
    position: absolute;

    left: 8px;
    right: 8px;

    top: 50%;

    height: 1px;

    background:
        rgba(60, 199, 214, 0.35);
}

.ux-point {
    position: absolute;

    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

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

    border:
        1px solid var(--color-accent-cyan);
}

.ux-point-1 {
    left: 12%;
}

.ux-point-2 {
    left: 50%;
}

.ux-point-3 {
    left: 88%;
}

.ux-signal {
    position: absolute;

    top: 50%;
    left: 12%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-glow-green);

    animation:
        uxSignalMove 4s ease-in-out infinite;
}

.support-line {
    position: absolute;

    left: 8px;
    right: 8px;

    height: 1px;
}

.support-line-1 {
    top: 26px;

    background:
        rgba(23, 184, 144, 0.42);
}

.support-line-2 {
    top: 44px;

    background:
        rgba(60, 199, 214, 0.42);
}

.support-signal {
    position: absolute;

    left: 8px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.support-signal-1 {
    top: 23px;

    background:
        var(--color-primary);

    animation:
        supportSignalMove 4.5s ease-in-out infinite;
}

.support-signal-2 {
    top: 41px;

    background:
        var(--color-accent-cyan);

    animation:
        supportSignalMove 4.5s ease-in-out infinite;

    animation-delay:
        0.6s;
}


/* =========================================================
   Proceso
========================================================= */

.process-section {
    padding: 150px 0;

    background:
        linear-gradient(
            180deg,
            #17212b 0%,
            #121a22 100%
        );

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

.process-list {
    border-top:
        1px solid var(--color-border);

    position: relative;

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

/* =========================================================
   Proceso - Paso
========================================================= */

.process-step {
    position: relative;

    display: grid;

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

    gap: 40px;

    padding:
        48px 0;

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

    transition:
        border-color 0.7s ease;
}


/* Fondo animado separado */

.process-step::before {
    content: '';

    position: absolute;

    inset: 8px 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.07) 0%,
            rgba(60, 199, 214, 0.025) 42%,
            rgba(111, 140, 255, 0.012) 70%,
            transparent 100%
        );

    opacity: 0;

    transform:
        translateX(-18px);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;

    z-index: 0;
}


/* Mantener contenido encima */

.process-step > * {
    position: relative;

    z-index: 1;
}

.process-step:hover::before {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   Nodo
========================================================= */

.process-step-node {
    position: absolute;

    left: 47px;
    top: 55px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

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

    background:
        #17212b;

    border:
        1px solid rgba(60, 199, 214, 0.55);

    z-index: 5;

    transition:
        background-color 0.75s ease,
        border-color 0.75s ease,
        box-shadow 0.9s ease,
        scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


.process-step:hover .process-step-node {
    scale: 1.18;

    background:
        var(--color-primary);

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

    box-shadow:
        0 0 14px rgba(23, 184, 144, 0.62);
}


/* Conexión horizontal */

.process-step-node::after {
    content: '';

    position: absolute;

    left: 9px;
    top: 50%;

    width: 32px;
    height: 1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.55),
            rgba(60, 199, 214, 0.08)
        );

    transition:
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s ease;
}

.process-step:hover .process-step-node::after {
    width: 42px;

    opacity: 1;
}


/* =========================================================
   Texto
========================================================= */

.process-number {
    font-size: 13px;

    letter-spacing:
        0.15em;

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


.process-step h3,
.process-step h3,
.process-step p,
.process-number {
    transition:
        color 0.65s ease,
        opacity 0.65s ease,
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}


.process-step h3 {
    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    letter-spacing:
        -0.025em;
}


.process-step p {
    max-width: 680px;

    margin-top: 14px;

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

    font-size: 17px;
    line-height: 1.75;
}


.process-step:hover h3 {
    transform:
        translateX(4px);
}

.process-step p {
    transform:
        translateX(0);
}

.process-step:hover p {
    transform:
        translateX(3px);
}


.process-step:hover .process-number {
    color:
        var(--color-accent-cyan);
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    padding:
        170px 0;

    background:
        linear-gradient(
            135deg,
            #22303a 0%,
            #1e2b34 55%,
            #1a252d 100%
        );

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

    position: relative;

    overflow: hidden;
}



.cta-content {
    max-width: 950px;
}

.cta-content h2 {
    font-size:
        clamp(
            52px,
            6vw,
            88px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}

.cta-content h2 span {
    display: block;

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

.cta-content p {
    max-width: 620px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

.cta-content .btn {
    margin-top: 38px;
}

/* =========================================================
   CTA Home - Composición
========================================================= */

.cta-home-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.75fr);

    gap: 100px;

    align-items: center;
}

.cta-home-grid .cta-content {
    max-width: 820px;
}


/* =========================================================
   CTA - Arquitectura tecnológica
========================================================= */

.cta-tech-visual {
    position: relative;

    width: 100%;
    max-width: 500px;

    aspect-ratio: 1 / 1;

    justify-self: end;
}


/* Glow */

.cta-tech-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 72%;
    height: 72%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.16) 0%,
            rgba(60, 199, 214, 0.08) 38%,
            rgba(111, 140, 255, 0.04) 55%,
            transparent 74%
        );

    filter: blur(20px);

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


/* =========================================================
   Capas del objeto
========================================================= */

.cta-cube {
    position: absolute;

    left: 50%;
    top: 50%;

    aspect-ratio: 1 / 1;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

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

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


.cta-cube-back {
    width: 68%;

    border-color:
        rgba(111, 140, 255, 0.26);

    transform:
        translate(-50%, -50%)
        translate(36px, -28px)
        rotate(45deg);

    animation:
        ctaLayerBack 9s ease-in-out infinite;
}


.cta-cube-middle {
    width: 50%;

    border-color:
        rgba(60, 199, 214, 0.42);

    transform:
        translate(-50%, -50%)
        translate(17px, -14px)
        rotate(45deg);

    background:
        rgba(60, 199, 214, 0.018);

    animation:
        ctaLayerMiddle 7s ease-in-out infinite;
}


.cta-cube-front {
    width: 32%;

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

    border-color:
        rgba(23, 184, 144, 0.60);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.13),
            rgba(60, 199, 214, 0.045)
        );

    box-shadow:
        0 0 40px rgba(23, 184, 144, 0.10);

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

.cta-cube-logo {
    width: 62%;
    height: auto;

    transform:
        rotate(-45deg);

    filter:
        drop-shadow(
            0 0 14px rgba(23, 184, 144, 0.30)
        );

    animation:
        ctaLogoPulse 4s ease-in-out infinite;
}

.cta-tech-node {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    z-index: 5;

    box-shadow:
        0 0 16px currentColor;
}


.cta-tech-node-1 {
    left: 18%;
    top: 28%;

    color:
        var(--color-primary);

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


.cta-tech-node-2 {
    right: 15%;
    top: 34%;

    color:
        var(--color-accent-cyan);

    background:
        var(--color-accent-cyan);
}


.cta-tech-node-3 {
    right: 23%;
    bottom: 19%;

    color:
        var(--color-accent-blue);

    background:
        var(--color-accent-blue);
}


.cta-tech-node-4 {
    left: 22%;
    bottom: 24%;

    color:
        var(--color-primary);

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

.cta-tech-line {
    position: absolute;

    height: 1px;

    transform-origin:
        left center;

    opacity: 0.55;

    background:
        linear-gradient(
            90deg,
            currentColor,
            transparent
        );
}


.cta-tech-line-1 {
    left: 19%;
    top: 29%;

    width: 105px;

    color:
        var(--color-primary);

    transform:
        rotate(23deg);
}


.cta-tech-line-2 {
    right: 16%;
    top: 35%;

    width: 100px;

    color:
        var(--color-accent-cyan);

    transform:
        rotate(158deg);
}


.cta-tech-line-3 {
    right: 24%;
    bottom: 20%;

    width: 105px;

    color:
        var(--color-accent-blue);

    transform:
        rotate(-145deg);
}


.cta-tech-line-4 {
    left: 23%;
    bottom: 25%;

    width: 90px;

    color:
        var(--color-primary);

    transform:
        rotate(-28deg);
}

.cta-tech-signal {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    z-index: 6;
}


.cta-tech-signal-1 {
    left: 19%;
    top: 29%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-glow-green);

    animation:
        ctaSignalOne 3.8s ease-in-out infinite;
}


.cta-tech-signal-2 {
    right: 16%;
    top: 35%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);

    animation:
        ctaSignalTwo 4.4s ease-in-out infinite;

    animation-delay:
        0.7s;
}


/* =========================================================
   Hero páginas interiores
========================================================= */

.page-hero {
    min-height: 78vh;

    display: flex;
    align-items: flex-end;

    padding:
        180px 0
        110px;

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

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #10151c 0%,
            #0d1117 70%
        );
}

.page-hero::before {
    content: '';

    position: absolute;

    width: 720px;
    height: 720px;

    top: -280px;
    right: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.16),
            rgba(23, 184, 144, 0.04) 42%,
            transparent 70%
        );

    pointer-events: none;
}

.page-hero .section-container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    max-width: 1000px;

    font-size:
        clamp(
            56px,
            7vw,
            100px
        );

    line-height: 0.96;

    letter-spacing:
        -0.05em;
}

.page-hero h1 span {
    display: block;

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

.page-hero p {
    max-width: 680px;

    margin-top: 34px;

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

    color:
        var(--color-text-muted);
}


/* =========================================================
   Nosotros
========================================================= */

.about-intro {
    padding:
        150px 0;

    background:
        linear-gradient(
            180deg,
            var(--color-surface) 0%,
            var(--color-surface-soft) 100%
        );
}

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    gap:
        120px;
}

.about-title h2 {
    max-width: 700px;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.about-copy {
    padding-top:
        32px;
}

.about-copy p {
    font-size: 18px;
    line-height: 1.85;

    color:
        var(--color-text-muted);
}

.about-copy p + p {
    margin-top: 28px;
}

.about-values {
    padding: 150px 0;

    background:
        #11161d;

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

.values-grid {
    display: grid;

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

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

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

.value-card {
    min-height: 300px;

    padding: 42px;

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

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

    transition:
        background 0.3s ease;
}

.value-card:hover {
    background:
        rgba(255, 255, 255, 0.025);
}

/* =========================================================
   Nosotros - Cómo trabajamos
========================================================= */

.value-card {
    position: relative;

    overflow: hidden;
}


.work-tech {
    position: absolute;

    top: 38px;
    right: 38px;

    width: 120px;
    height: 85px;

    opacity: 0.62;

    transition:
        opacity 0.55s ease,
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}


.value-card:hover .work-tech {
    opacity: 1;

    transform:
        scale(1.06);
}

/* =========================================================
   Claridad
========================================================= */

.clarity-line {
    position: absolute;

    left: 10px;
    right: 10px;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23, 184, 144, 0.55),
            rgba(60, 199, 214, 0.55),
            transparent
        );

    opacity: 0.45;
}


.clarity-point {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px var(--color-glow-green);
}


.clarity-point-1 {
    left: 12%;
    top: 20%;

    animation:
        clarityPointOne 4s ease-in-out infinite;
}


.clarity-point-2 {
    left: 36%;
    top: 68%;

    animation:
        clarityPointTwo 4s ease-in-out infinite;
}


.clarity-point-3 {
    left: 62%;
    top: 28%;

    animation:
        clarityPointThree 4s ease-in-out infinite;
}


.clarity-point-4 {
    left: 88%;
    top: 72%;

    animation:
        clarityPointFour 4s ease-in-out infinite;
}

/* =========================================================
   Funcionalidad
========================================================= */

.function-line {
    position: absolute;

    left: 12px;
    right: 12px;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.15),
            rgba(60, 199, 214, 0.65),
            rgba(60, 199, 214, 0.15)
        );
}


.function-node {
    position: absolute;

    top: 50%;

    width: 11px;
    height: 11px;

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

    border:
        1px solid rgba(60, 199, 214, 0.55);

    background:
        #11161d;

    z-index: 2;
}


.function-node-1 {
    left: 15%;
}


.function-node-2 {
    left: 50%;
}


.function-node-3 {
    left: 85%;
}


.function-signal {
    position: absolute;

    left: 15%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);

    z-index: 4;

    animation:
        functionSignal 4s ease-in-out infinite;
}

/* =========================================================
   Evolución
========================================================= */

.evolution-layer {
    position: absolute;

    left: 50%;

    border:
        1px solid rgba(111, 140, 255, 0.45);

    transform:
        translateX(-50%);

    transform-origin:
        center bottom;
}


.evolution-layer-1 {
    bottom: 10px;

    width: 70px;
    height: 18px;

    animation:
        evolutionLayerPulse 4s ease-in-out infinite;
}


.evolution-layer-2 {
    bottom: 29px;

    width: 52px;
    height: 18px;

    animation:
        evolutionLayerPulse 4s ease-in-out infinite;

    animation-delay:
        0.45s;
}


.evolution-layer-3 {
    bottom: 48px;

    width: 34px;
    height: 18px;

    animation:
        evolutionLayerPulse 4s ease-in-out infinite;

    animation-delay:
        0.9s;
}


.work-evolution-signal {
    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 16px var(--color-glow-blue);

    animation:
        workEvolutionRise 4s ease-in-out infinite;
}

/* =========================================================
   Colaboración
========================================================= */

.collab-path {
    position: absolute;

    top: 50%;

    width: 44%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(60, 199, 214, 0.65)
        );
}


.collab-path-left {
    left: 0;
}


.collab-path-right {
    right: 0;

    transform:
        scaleX(-1);
}


.collab-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 14px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px var(--color-glow-green);

    animation:
        collaborationCore 3.6s ease-in-out infinite;
}


.collab-signal {
    position: absolute;

    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    z-index: 4;
}


.collab-signal-left {
    left: 4%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    animation:
        collaborationLeft 3.6s ease-in-out infinite;
}


.collab-signal-right {
    left: 96%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 14px var(--color-glow-cyan);

    animation:
        collaborationRight 3.6s ease-in-out infinite;
}

.value-number {
    display: block;

    margin-bottom: 60px;

    font-size: 12px;

    letter-spacing:
        0.16em;

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

.value-card h3 {
    font-size: 28px;

    letter-spacing:
        -0.02em;
}

.value-card p {
    max-width: 480px;

    margin-top: 18px;

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

    line-height: 1.8;
}

.about-closing {
    padding:
        170px 0;

    background:
        var(--color-surface-soft);

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

.about-closing-content {
    max-width: 950px;
}

.about-closing h2 {
    font-size:
        clamp(
            58px,
            7vw,
            100px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.05em;
}

.about-closing h2 span {
    display: block;
}

.about-closing h2 span:last-child {
    color:
        var(--color-text-secondary);
}

.about-closing p {
    max-width: 620px;

    margin-top: 32px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

/* =========================================================
   Nosotros - Nuestra visión
========================================================= */

.about-vision-copy {
    position: relative;

    overflow: hidden;
}

/* =========================================================
   Nosotros - Visión / Camino
========================================================= */

.vision-road {
    position: relative;

    width: 100%;
    height: 190px;

    margin-top: 55px;

    overflow: hidden;
}


/* Camino */

.vision-road-track {
    position: absolute;

    left: 5%;
    right: 5%;
    top: 50%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.55),
            rgba(60, 199, 214, 0.55),
            rgba(111, 140, 255, 0.45)
        );

    transform:
        skewY(-6deg);

    transform-origin:
        left center;

    box-shadow:
        0 0 16px rgba(60, 199, 214, 0.08);
}


/* Segunda línea para darle profundidad */

.vision-road-track::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;

    top: 14px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.22),
            rgba(111, 140, 255, 0.18)
        );
}


/* Hitos */

.vision-road-node {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

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

    z-index: 3;
}


.vision-road-node-1 {
    left: 12%;
    top: 58%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 15px var(--color-glow-green);
}


.vision-road-node-2 {
    left: 52%;
    top: 48%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 15px var(--color-glow-cyan);
}


.vision-road-node-3 {
    left: 88%;
    top: 38%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 15px var(--color-glow-blue);
}


/* Señal que avanza */

.vision-road-signal {
    position: absolute;

    left: 12%;
    top: 58%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.9),
        0 0 30px rgba(23, 184, 144, 0.45);

    z-index: 4;

    animation:
        visionRoadTravel 6s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   NOSOTROS - Nuestra misión
========================================================= */

.about-mission {
    position: relative;

    overflow: hidden;

    padding:
        150px 0
        170px;
}


.mission-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.85fr);

    gap: 140px;

    align-items: center;
}


.mission-content {
    max-width: 720px;
}


.mission-content h2 {
    margin-top: 20px;

    font-size:
        clamp(
            38px,
            5vw,
            68px
        );

    line-height: 1.05;

    letter-spacing:
        -0.04em;
}


.mission-content h2 span {
    color:
        var(--color-primary);
}


.mission-content p {
    max-width: 650px;

    margin-top: 32px;

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

    font-size: 17px;
    line-height: 1.9;
}

.mission-statement {
    position: relative;

    max-width: 620px;

    margin-top: 48px;

    padding:
        22px 26px
        22px 30px;

    border-left:
        2px solid var(--color-primary);

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.055),
            transparent
        );

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

    font-size: 16px;
    line-height: 1.7;
}


.mission-statement strong {
    color:
        var(--color-text);

    font-weight: 600;
}

/* =========================================================
   Misión - Pilares
========================================================= */

.mission-visual {
    position: relative;

    width: 100%;
    max-width: 540px;

    height: 440px;

    justify-self: end;
}


/* Glow general */

.mission-visual::before {
    content: '';

    position: absolute;

    left: 50%;
    top: 48%;

    width: 85%;
    height: 70%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(60, 199, 214, 0.07),
            rgba(23, 184, 144, 0.035) 38%,
            transparent 70%
        );

    filter:
        blur(28px);

    pointer-events: none;
}

.mission-platform {
    position: absolute;

    left: 7%;
    right: 7%;

    bottom: 104px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23, 184, 144, 0.35),
            rgba(60, 199, 214, 0.50),
            rgba(111, 140, 255, 0.35),
            transparent
        );

    box-shadow:
        0 0 16px rgba(60, 199, 214, 0.10);
}


.mission-platform::after {
    content: '';

    position: absolute;

    left: 50%;
    top: -15px;

    width: 82%;
    height: 30px;

    transform:
        translateX(-50%)
        perspective(180px)
        rotateX(68deg);

    border:
        1px solid rgba(60, 199, 214, 0.12);

    background:
        rgba(60, 199, 214, 0.012);
}

.mission-pillar {
    position: absolute;

    bottom: 105px;

    width: 92px;

    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}


.mission-pillar-problem {
    left: 8%;
}


.mission-pillar-solution {
    left: 50%;

    transform:
        translateX(-50%);
}


.mission-pillar-evolution {
    right: 8%;
}

.pillar-body {
    position: relative;

    width: 100%;
    height: 230px;

    border:
        1px solid rgba(60, 199, 214, 0.25);

    background:
        linear-gradient(
            180deg,
            rgba(60, 199, 214, 0.045),
            rgba(60, 199, 214, 0.008)
        );

    box-shadow:
        inset 0 0 30px rgba(60, 199, 214, 0.025);

    overflow: hidden;

    transition:
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        background 0.6s ease;
}

.pillar-body::before {
    content: '';

    position: absolute;

    left: 8px;
    right: -9px;

    top: -9px;

    height: 16px;

    transform:
        skewX(-45deg);

    border:
        1px solid rgba(60, 199, 214, 0.22);

    background:
        rgba(60, 199, 214, 0.035);
}


.pillar-body::after {
    content: '';

    position: absolute;

    top: -1px;
    bottom: 8px;

    right: -9px;

    width: 16px;

    transform:
        skewY(-45deg);

    border:
        1px solid rgba(60, 199, 214, 0.16);

    background:
        rgba(60, 199, 214, 0.018);
}

.mission-pillar-problem .pillar-body {
    border-color:
        rgba(23, 184, 144, 0.34);
}

.mission-pillar-solution .pillar-body {
    border-color:
        rgba(60, 199, 214, 0.46);

    box-shadow:
        inset 0 0 35px rgba(60, 199, 214, 0.035),
        0 0 24px rgba(60, 199, 214, 0.035);
}

.mission-pillar-evolution .pillar-body {
    border-color:
        rgba(111, 140, 255, 0.42);
}

.pillar-level {
    position: absolute;

    left: 12px;
    right: 12px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(60, 199, 214, 0.30),
            transparent
        );
}


.pillar-level-1 {
    bottom: 20%;
}

.pillar-level-2 {
    bottom: 40%;
}

.pillar-level-3 {
    bottom: 60%;
}

.pillar-level-4 {
    bottom: 80%;
}

.problem-particle {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px var(--color-glow-green);
}


.problem-particle-1 {
    left: 20%;
    top: 20%;

    animation:
        problemParticleOne 4.2s ease-in-out infinite;
}


.problem-particle-2 {
    right: 22%;
    top: 47%;

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


.problem-particle-3 {
    left: 42%;
    bottom: 17%;

    animation:
        problemParticleThree 3.8s ease-in-out infinite;
}

.solution-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 14px;

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

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);

    animation:
        solutionCorePulse 2.8s ease-in-out infinite;
}


.solution-core::before,
.solution-core::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid rgba(60, 199, 214, 0.30);

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

    animation:
        solutionCoreExpand 2.8s ease-out infinite;
}


.solution-core::before {
    width: 36px;
    height: 36px;
}


.solution-core::after {
    width: 62px;
    height: 62px;

    animation-delay:
        0.45s;
}

.evolution-signal {
    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 16px var(--color-glow-blue);

    animation:
        evolutionRise 3.8s ease-in-out infinite;
}


.evolution-signal::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 7px;

    width: 1px;
    height: 42px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            rgba(111, 140, 255, 0.65),
            transparent
        );
}

.pillar-label {
    margin-top: 24px;

    text-align: center;
}


.pillar-label strong {
    display: block;

    color:
        var(--color-text);

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

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.pillar-label span {
    display: block;

    margin-top: 6px;

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

    font-size: 12px;
}

.mission-pillar:hover {
    transform:
        translateY(-10px);
}


.mission-pillar-solution:hover {
    transform:
        translateX(-50%)
        translateY(-10px);
}


.mission-pillar:hover .pillar-body {
    border-color:
        rgba(60, 199, 214, 0.75);

    box-shadow:
        inset 0 0 36px rgba(60, 199, 214, 0.05),
        0 0 30px rgba(60, 199, 214, 0.10);
}

.mission-connection {
    position: absolute;

    bottom: 205px;

    height: 1px;

    background:
        rgba(60, 199, 214, 0.20);
}


.mission-connection-1 {
    left: 26%;
    width: 19%;
}


.mission-connection-2 {
    right: 26%;
    width: 19%;
}

.mission-flow {
    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 14px var(--color-glow-cyan);
}


.mission-flow-1 {
    animation:
        missionFlow 3.5s ease-in-out infinite;
}


.mission-flow-2 {
    animation:
        missionFlow 3.5s ease-in-out infinite;

    animation-delay:
        1.75s;
}

/* =========================================================
   Nosotros - Pensamos
========================================================= */

.thinking-tech {
    position: relative;

    width: 100%;
    max-width: 500px;
    height: 360px;

    margin-left: auto;
}


/* Núcleo */

.thinking-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 74px;
    height: 74px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.04)
        );

    box-shadow:
        0 0 28px rgba(60, 199, 214, 0.08);

    animation:
        thinkingCorePulse 4s ease-in-out infinite;
}


/* Nodos */

.thinking-node {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    z-index: 3;
}

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

.thinking-node-2 {
    left: 80%;
    top: 20%;

    background:
        var(--color-accent-cyan);
}

.thinking-node-3 {
    left: 7%;
    top: 62%;

    background:
        var(--color-accent-cyan);
}

.thinking-node-4 {
    right: 7%;
    top: 65%;

    background:
        var(--color-accent-blue);
}

.thinking-node-5 {
    left: 32%;
    bottom: 8%;
}

.thinking-node-6 {
    right: 30%;
    bottom: 6%;

    background:
        var(--color-accent-blue);
}

.thinking-link {
    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.55),
            rgba(60, 199, 214, 0.06)
        );

    opacity: 0.35;

    animation:
        thinkingLinkPulse 4s ease-in-out infinite;
}


.thinking-link-1 {
    width: 190px;

    transform:
        rotate(-145deg);
}

.thinking-link-2 {
    width: 185px;

    transform:
        rotate(-35deg);

    animation-delay:
        0.4s;
}

.thinking-link-3 {
    width: 205px;

    transform:
        rotate(165deg);

    animation-delay:
        0.8s;
}

.thinking-link-4 {
    width: 200px;

    transform:
        rotate(15deg);

    animation-delay:
        1.2s;
}

.thinking-link-5 {
    width: 145px;

    transform:
        rotate(118deg);

    animation-delay:
        1.6s;
}

.thinking-link-6 {
    width: 145px;

    transform:
        rotate(62deg);

    animation-delay:
        2s;
}

.thinking-signal {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    z-index: 4;
}


.thinking-signal-1 {
    left: 12%;
    top: 18%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-glow-green);

    animation:
        thinkingSignalOne 4.8s ease-in-out infinite;
}


.thinking-signal-2 {
    right: 7%;
    top: 65%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 16px var(--color-glow-blue);

    animation:
        thinkingSignalTwo 5.2s ease-in-out infinite;

    animation-delay:
        0.8s;
}/* =========================================================
   Nosotros - Cierre
========================================================= */

.about-closing-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.8fr);

    gap: 100px;

    align-items: center;
}

.about-closing-content {
    max-width: 760px;
}

.thinking-tech {
    justify-self: end;

    margin-left: 0;
}

/* =========================================================
   Nosotros - Fundador
========================================================= */

.founder-section {
    position: relative;

    padding:
        150px 0;

    background:
        var(--color-bg);

    overflow:
        hidden;
}


.founder-grid {
    display: grid;

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

    gap:
        120px;

    align-items:
        center;
}


/* =========================================================
   Fotografía
========================================================= */

.founder-visual {
    position: relative;

    width: 100%;
    max-width: 470px;

    justify-self:
        center;
}


.founder-photo-frame {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    padding:
        18px;

    border:
        1px solid rgba(60, 199, 214, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.055),
            rgba(60, 199, 214, 0.018)
        );

    transform:
        translateY(-18px);

    box-shadow:
        0 32px 55px rgba(0, 0, 0, 0.38),
        0 15px 35px rgba(23, 184, 144, 0.08);

    z-index:
        2;
}

.founder-float-shadow {
    position: absolute;

    left: 50%;
    bottom: -72px;

    width: 82%;
    height: 32px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(23, 184, 144, 0.42) 0%,
            rgba(60, 199, 214, 0.22) 30%,
            rgba(23, 184, 144, 0.08) 52%,
            transparent 75%
        );

    filter:
        blur(14px);

    opacity:
        0.9;

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        founderFloatShadow 4.8s ease-in-out infinite;
}

.founder-visual::after {
    content: '';

    position: absolute;

    left: 50%;
    bottom: -42px;

    width: 58%;
    height: 14px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, 0.48);

    filter:
        blur(10px);

    opacity:
        0.8;

    z-index:
        0;

    pointer-events:
        none;
}

.founder-photo-line {
    position: absolute;

    display: block;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.08),
            rgba(60, 199, 214, 0.55),
            rgba(23, 184, 144, 0.08)
        );

    pointer-events:
        none;
}


.founder-photo-line-1 {
    left: -90px;
    top: 28%;

    width: 150px;
    height: 1px;
}


.founder-photo-line-2 {
    right: -90px;
    bottom: 23%;

    width: 150px;
    height: 1px;
}

.founder-photo-line-3 {
    left: 18%;

    top: -55px;

    width: 1px;
    height: 90px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(23, 184, 144, 0.55),
            rgba(60, 199, 214, 0.10)
        );
}


.founder-photo-line-4 {
    right: 16%;

    bottom: -55px;

    width: 1px;
    height: 90px;

    background:
        linear-gradient(
            180deg,
            rgba(60, 199, 214, 0.10),
            rgba(111, 140, 255, 0.55),
            transparent
        );
}

.founder-frame-signal {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius:
        50%;

    z-index:
        5;

    pointer-events:
        none;
}


/* Izquierda → foto */

.founder-frame-signal-1 {
    left: -90px;
    top: calc(28% - 4px);

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 25px rgba(23, 184, 144, 0.30);

    animation:
        founderSignalHorizontalLeft 4.8s ease-in-out infinite;
}


/* Foto → derecha */

.founder-frame-signal-2 {
    right: 55px;
    bottom: calc(23% - 4px);

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 12px rgba(60, 199, 214, 0.95);

    animation:
        founderSignalHorizontalRight 5.2s ease-in-out infinite;

    animation-delay:
        0.7s;
}


/* Arriba → abajo */

.founder-frame-signal-3 {
    left: calc(18% - 4px);
    top: -55px;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95);

    animation:
        founderSignalVerticalTop 4.6s ease-in-out infinite;

    animation-delay:
        1.1s;
}


/* Abajo → arriba */

.founder-frame-signal-4 {
    right: calc(16% - 4px);
    bottom: -55px;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 12px rgba(111, 140, 255, 0.95);

    animation:
        founderSignalVerticalBottom 5s ease-in-out infinite;

    animation-delay:
        1.6s;
}


/* Segundo marco desplazado */

.founder-photo-frame::before {
    content: '';

    position: absolute;

    inset:
        32px -22px -22px 32px;

    border:
        1px solid rgba(23, 184, 144, 0.18);

    z-index:
        -1;
}


/* Glow */

.founder-photo-frame::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 85%;
    height: 85%;

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

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.11),
            transparent 68%
        );

    filter:
        blur(30px);

    z-index:
        -2;
}


.founder-photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        saturate(0.88)
        contrast(1.05)
        drop-shadow(
            0 12px 18px rgba(0, 0, 0, 0.22)
        );
}

/* Líneas */

.founder-photo-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.70),
            rgba(60, 199, 214, 0.15),
            transparent
        );
}


.founder-photo-line-1 {
    left: -35px;
    top: 27%;

    width: 95px;
}


.founder-photo-line-2 {
    right: -55px;
    bottom: 22%;

    width: 120px;

    transform:
        rotate(180deg);
}


/* Nodos */

.founder-photo-node {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    animation:
        founderNodePulse 4s ease-in-out infinite;
}


.founder-photo-node-1 {
    left: -39px;
    top: calc(27% - 4px);
}


.founder-photo-node-2 {
    right: -59px;
    bottom: calc(22% - 4px);

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 14px var(--color-glow-cyan);

    animation-delay:
        1.1s;
}

/* =========================================================
   Contenido fundador
========================================================= */

.founder-content {
    max-width:
        680px;
}


.founder-content h2 {
    margin-top:
        22px;

    font-size:
        clamp(
            42px,
            6.3vw,
            62px
        );

    line-height:
        1.04;

    letter-spacing:
        -0.04em;
}


.founder-content h2 span {
    display:
        block;

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


.founder-content > p {
    max-width:
        620px;

    margin-top:
        30px;

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

    font-size:
        17px;

    line-height:
        1.8;
}


.founder-content > p + p {
    margin-top:
        20px;
}

.founder-signature {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items:
        flex-start;

    margin-top:
        45px;

    padding-top:
        28px;

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


.founder-name {
    font-family:
        "Island Moments",
        cursive;

    font-size:
        clamp(
            58px,
            5.5vw,
            76px
        );

    font-weight:
        400;

    line-height:
        0.9;

    letter-spacing:
        0.01em;

    color:
        var(--color-primary);

    transform:
        none;
}


.founder-role {
    margin-top:
        13px;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        var(--color-text-muted);
}

/* =========================================================
   Nosotros - CTA Conversemos
========================================================= */

.about-contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.8fr);

    gap: 110px;

    align-items: center;
}


/* =========================================================
   Canal de conexión
========================================================= */

.contact-channel {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 320px;

    justify-self: end;
}


.contact-channel::before {
    content: '';

    position: absolute;

    left: 58%;
    top: 50%;

    width: 75%;
    height: 75%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.045) 40%,
            transparent 72%
        );

    filter: blur(22px);
}


/* Nodo inicial */

.contact-channel-source {
    position: absolute;

    left: 5%;
    top: 50%;

    width: 54px;
    height: 54px;

    transform:
        translateY(-50%);

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

    border:
        1px solid rgba(23, 184, 144, 0.45);

    background:
        rgba(23, 184, 144, 0.035);
}


.contact-channel-source span {
    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px var(--color-glow-green);

    animation:
        contactSourcePulse 3s ease-in-out infinite;
}


/* Línea principal */

.contact-channel-line {
    position: absolute;

    left: calc(5% + 54px);
    right: calc(7% + 112px);

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.55),
            rgba(60, 199, 214, 0.72),
            rgba(111, 140, 255, 0.38)
        );
}


/* Señal */

.contact-channel-signal {
    position: absolute;

    left: 0;
    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 26px rgba(23, 184, 144, 0.45);

    animation:
        contactSignalTravel 4.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}


/* Nodo final */

.contact-channel-target {
    position: absolute;

    right: 5%;
    top: 50%;

    width: 112px;
    height: 112px;

    transform:
        translateY(-50%)
        rotate(45deg);

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

    border:
        1px solid rgba(60, 199, 214, 0.48);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.09),
            rgba(60, 199, 214, 0.035)
        );

    box-shadow:
        0 0 34px rgba(60, 199, 214, 0.07);

    transition:
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}


.contact-channel-logo {
    width: 60%;
    height: auto;

    transform:
        rotate(-45deg);

    filter:
        drop-shadow(
            0 0 14px rgba(23, 184, 144, 0.28)
        );

    animation:
        contactLogoPulse 4s ease-in-out infinite;
}

.contact-channel-branch {
    position: absolute;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.38),
            transparent
        );

    opacity: 0.55;
}


.branch-1 {
    left: 28%;
    top: 50%;

    width: 120px;

    transform:
        rotate(-24deg);
}


.branch-2 {
    left: 46%;
    top: 50%;

    width: 120px;

    transform:
        rotate(24deg);
}


.branch-3 {
    left: 58%;
    top: 50%;

    width: 90px;

    transform:
        rotate(-40deg);
}


.contact-channel-node {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 12px var(--color-glow-cyan);

    animation:
        contactNodePulse 3s ease-in-out infinite;
}


.contact-channel-node.node-1 {
    left: 43%;
    top: 35%;
}


.contact-channel-node.node-2 {
    left: 61%;
    top: 64%;

    animation-delay:
        0.7s;
}


.contact-channel-node.node-3 {
    left: 72%;
    top: 31%;

    background:
        var(--color-accent-blue);

    animation-delay:
        1.3s;
}

.about-contact-grid:has(.about-contact-button:hover)
.contact-channel-signal {
    animation-duration:
        2.2s;
}


.about-contact-grid:has(.about-contact-button:hover)
.contact-channel-target {
    border-color:
        rgba(23, 184, 144, 0.90);

    box-shadow:
        0 0 42px rgba(23, 184, 144, 0.22);

    transform:
        translateY(-50%)
        rotate(45deg)
        scale(1.06);
}


/* =========================================================
   Servicios - Página
========================================================= */

.services-detail {
    background:
        var(--color-bg);
}

.service-detail-item {
    display: grid;

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

    gap: 80px;

    padding:
        120px 0;

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

.service-detail-meta {
    display: flex;
    flex-direction: column;

    gap: 10px;

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

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--color-text-muted);
}

.service-detail-meta span:first-child {
    color:
        var(--color-primary);
}

.service-detail-content {
    max-width: 820px;
}

.service-detail-content h2 {
    font-size:
        clamp(
            38px,
            4vw,
            62px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.service-detail-content > p {
    max-width: 680px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

.service-features {
    display: grid;

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

    gap:
        0 40px;

    margin-top: 45px;

    padding: 0;

    list-style: none;

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

.service-features li {
    position: relative;

    padding:
        18px 0
        18px 20px;

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

    color:
        var(--color-text-muted);
}

.service-features li::before {
    content: '';

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);

    transform:
        translateY(-50%);
}

.service-approach {
    padding: 150px 0;

    background:
        var(--color-surface);

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

.service-approach-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.8fr);

    gap:
        120px;
}

.service-approach h2 {
    max-width: 700px;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.service-approach-copy {
    padding-top: 32px;
}

.service-approach-copy p {
    font-size: 18px;

    line-height: 1.85;

    color:
        var(--color-text-muted);
}

.service-approach-copy p + p {
    margin-top: 26px;
}

/* =========================================================
   Servicios - Visual detalle
========================================================= */

.service-detail-tech {
    position: relative;

    width: 190px;
    height: 150px;

    margin-top: 42px;

    opacity: 0.72;

    transition:
        opacity 0.5s ease,
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-detail-item:hover .service-detail-tech {
    opacity: 1;

    transform:
        translateY(-4px);
}

/* =========================================================
   Desarrollo Web
========================================================= */

.web-window {
    position: relative;

    width: 100%;
    height: 118px;

    border:
        1px solid rgba(60, 199, 214, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.035),
            rgba(23, 184, 144, 0.015)
        );

    overflow: hidden;
}

.web-window-bar {
    position: absolute;

    left: 0;
    right: 0;
    top: 22px;

    height: 1px;

    background:
        rgba(60, 199, 214, 0.20);
}

.web-window-dot {
    position: absolute;

    top: 10px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 10px var(--color-glow-green);
}

.web-window-dot-1 {
    left: 12px;
}

.web-window-dot-2 {
    left: 24px;

    background:
        var(--color-accent-cyan);
}

.web-window-dot-3 {
    left: 36px;

    background:
        var(--color-accent-blue);
}

.web-window-line {
    position: absolute;

    left: 18px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.55),
            transparent
        );
}

.web-window-line-1 {
    top: 48px;

    width: 120px;
}

.web-window-line-2 {
    top: 70px;

    width: 95px;
}

.web-window-line-3 {
    top: 92px;

    width: 135px;
}

.web-window-signal {
    position: absolute;

    left: 18px;
    top: 48px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);

    animation:
        serviceWebSignal 4.6s ease-in-out infinite;
}

/* =========================================================
   Aplicaciones Empresariales
========================================================= */

.business-system {
    position: relative;

    width: 160px;
    height: 120px;

    margin:
        8px auto 0;
}


/* Núcleo central */

.business-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px var(--color-glow-green),
        0 0 32px rgba(23, 184, 144, 0.14);

    z-index: 4;

    animation:
        businessCorePulse 2.8s ease-in-out infinite;
}


/* Módulos */

.business-module {
    position: absolute;

    width: 34px;
    height: 26px;

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        rgba(60, 199, 214, 0.025);

    box-shadow:
        inset 0 0 12px rgba(60, 199, 214, 0.025);

    animation:
        businessModulePulse 3.6s ease-in-out infinite;
}


.business-module-1 {
    left: 0;
    top: 0;
}


.business-module-2 {
    right: 0;
    top: 0;

    animation-delay:
        0.45s;
}


.business-module-3 {
    left: 0;
    bottom: 0;

    animation-delay:
        0.9s;
}


.business-module-4 {
    right: 0;
    bottom: 0;

    animation-delay:
        1.35s;
}

.business-link {
    position: absolute;

    background:
        rgba(60, 199, 214, 0.30);
}


.business-link-horizontal {
    left: 17px;
    right: 17px;

    top: 50%;

    height: 1px;
}


.business-link-vertical {
    top: 13px;
    bottom: 13px;

    left: 50%;

    width: 1px;
}

.business-signal {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    z-index: 5;
}


.business-signal-horizontal {
    left: 17px;
    top: 50%;

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

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 14px var(--color-glow-cyan);

    animation:
        businessSignalHorizontal 3.8s ease-in-out infinite;
}


.business-signal-vertical {
    left: 50%;
    top: 13px;

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

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 14px var(--color-glow-blue);

    animation:
        businessSignalVertical 4.2s ease-in-out infinite;

    animation-delay:
        0.8s;
}

/* =========================================================
   Automatización
========================================================= */

.automation-pipeline {
    position: relative;

    width: 180px;
    height: 120px;

    margin:
        8px auto 0;
}


/* Línea principal */

.automation-track {
    position: absolute;

    left: 10px;
    right: 10px;

    top: 52%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.25),
            rgba(60, 199, 214, 0.70),
            rgba(111, 140, 255, 0.40)
        );
}


/* Etapas */

.automation-stage {
    position: absolute;

    top: 52%;

    width: 15px;
    height: 15px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.50);

    background:
        #101820;

    z-index: 3;

    animation:
        automationStagePulse 4s ease-in-out infinite;
}


.automation-stage-1 {
    left: 8%;
}


.automation-stage-2 {
    left: 36%;

    animation-delay:
        0.45s;
}


.automation-stage-3 {
    left: 64%;

    animation-delay:
        0.9s;
}


.automation-stage-4 {
    left: 92%;

    animation-delay:
        1.35s;
}

.automation-signal {
    position: absolute;

    left: 8%;
    top: 52%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 24px rgba(23, 184, 144, 0.40);

    z-index: 5;

    animation:
        automationSignalTravel 4.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

.automation-branch {
    position: absolute;

    left: 64%;
    top: 52%;

    width: 58px;
    height: 1px;

    transform-origin:
        left center;

    transform:
        rotate(-42deg);

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.55),
            transparent
        );
}


.automation-output {
    position: absolute;

    right: 5px;
    top: 16px;

    width: 12px;
    height: 12px;

    border:
        1px solid rgba(111, 140, 255, 0.60);

    background:
        rgba(111, 140, 255, 0.04);

    animation:
        automationOutputPulse 3.2s ease-in-out infinite;

    animation-delay:
        1.8s;
}

/* =========================================================
   Diseño de Experiencia
========================================================= */

.ux-interface {
    position: relative;

    width: 170px;
    height: 120px;

    margin:
        8px auto 0;
}


/* Marco general */

.ux-interface-frame {
    position: absolute;

    inset: 5px;

    border:
        1px solid rgba(111, 140, 255, 0.34);

    background:
        linear-gradient(
            145deg,
            rgba(111, 140, 255, 0.025),
            rgba(60, 199, 214, 0.012)
        );
}


/* Bloques de interfaz */

.ux-block {
    position: absolute;

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        rgba(60, 199, 214, 0.035);

    transition:
        border-color 0.4s ease,
        background 0.4s ease;
}


.ux-block-1 {
    left: 18px;
    top: 20px;

    width: 58px;
    height: 26px;

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


.ux-block-2 {
    right: 18px;
    top: 20px;

    width: 58px;
    height: 26px;

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


.ux-block-3 {
    left: 18px;
    bottom: 18px;

    width: 90px;
    height: 34px;

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


.ux-block-4 {
    right: 18px;
    bottom: 18px;

    width: 34px;
    height: 34px;

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

.ux-focus {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    z-index: 5;

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

/* =========================================================
   Microdiagramas - Servicios
========================================================= */

@keyframes autoSignalFlow {

    0% {
        left: 6%;

        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 94%;

        opacity: 0;
    }

}

.web-node {
    animation:
        serviceNodePulse 3.2s ease-in-out infinite;
}

.web-node-2 {
    animation-delay: 0.5s;
}

.web-node-3 {
    animation-delay: 1s;
}

.web-node-4 {
    animation-delay: 1.5s;
}

.apps-core {
    animation:
        serviceCorePulse 3s ease-in-out infinite;
}

/* =========================================================
   Servicios - Nuestra forma de trabajar
========================================================= */

.approach-tech {
    position: relative;

    width: 100%;
    max-width: 420px;
    height: 220px;

    margin-top: 50px;
}


/* Núcleo */

.approach-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.12),
            rgba(60, 199, 214, 0.035)
        );

    box-shadow:
        0 0 24px rgba(60, 199, 214, 0.10);

    animation:
        approachCorePulse 4.2s ease-in-out infinite;
}


/* Piezas */

.approach-piece {
    position: absolute;

    border:
        1px solid rgba(60, 199, 214, 0.40);

    background:
        rgba(60, 199, 214, 0.025);

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


.approach-piece-1 {
    left: 8%;
    top: 18%;

    width: 42px;
    height: 28px;
}


.approach-piece-2 {
    right: 9%;
    top: 20%;

    width: 34px;
    height: 34px;

    transform:
        rotate(45deg);

    animation-delay:
        0.5s;
}


.approach-piece-3 {
    left: 12%;
    bottom: 15%;

    width: 52px;
    height: 24px;

    animation-delay:
        1s;
}


.approach-piece-4 {
    right: 12%;
    bottom: 14%;

    width: 38px;
    height: 26px;

    animation-delay:
        1.5s;
}

.approach-link {
    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.52),
            transparent
        );

    opacity: 0.35;
}


.approach-link-1 {
    width: 155px;

    transform:
        rotate(-145deg);
}


.approach-link-2 {
    width: 150px;

    transform:
        rotate(-35deg);
}


.approach-link-3 {
    width: 150px;

    transform:
        rotate(145deg);
}


.approach-link-4 {
    width: 145px;

    transform:
        rotate(35deg);
}

/* =========================================================
   Servicios - CTA Tu proyecto
========================================================= */

.services-cta-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.85fr);

    gap: 110px;

    align-items: center;
}


.services-cta-grid .cta-content {
    max-width: 760px;
}


.project-transform {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 330px;

    justify-self: end;
}

.project-origin {
    position: absolute;

    left: 5%;
    top: 50%;

    width: 105px;
    height: 105px;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(23, 184, 144, 0.18);

    animation:
        projectOriginRotate 10s linear infinite;
}


.project-origin::before {
    content: '';

    position: absolute;

    inset: 18px;

    border:
        1px solid rgba(60, 199, 214, 0.22);

    transform:
        rotate(26deg);
}


.project-origin-point {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px var(--color-glow-green);

    animation:
        projectOriginPulse 3s ease-in-out infinite;
}


.point-1 {
    left: 12%;
    top: 22%;
}


.point-2 {
    right: 12%;
    top: 32%;

    background:
        var(--color-accent-cyan);

    animation-delay:
        0.5s;
}


.point-3 {
    left: 32%;
    bottom: 10%;

    background:
        var(--color-accent-blue);

    animation-delay:
        1s;
}


.point-4 {
    right: 20%;
    bottom: 20%;

    animation-delay:
        1.5s;
}

.project-path {
    position: absolute;

    left: 27%;
    right: 29%;

    top: 50%;

    height: 1px;
}


.project-path-line {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.35),
            rgba(60, 199, 214, 0.72),
            rgba(111, 140, 255, 0.42)
        );
}


.project-path-signal {
    position: absolute;

    left: 0;
    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 26px rgba(23, 184, 144, 0.40);

    animation:
        projectSignalTravel 4.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

.project-solution {
    position: absolute;

    right: 5%;
    top: 50%;

    width: 126px;
    height: 126px;

    transform:
        translateY(-50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.48);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.035)
        );

    box-shadow:
        0 0 38px rgba(60, 199, 214, 0.08);

    animation:
        projectSolutionFloat 5s ease-in-out infinite;

    transition:
        border-color 0.6s ease,
        box-shadow 0.6s ease;
}


.project-solution-frame {
    width: 100%;
    height: 100%;

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


.project-solution-logo {
    width: 58%;
    height: auto;

    transform:
        rotate(-45deg);

    filter:
        drop-shadow(
            0 0 16px rgba(23, 184, 144, 0.30)
        );

    animation:
        projectLogoPulse 4s ease-in-out infinite;
}

.services-cta-grid:has(.services-cta-button:hover)
.project-path-signal {
    animation-duration:
        2.1s;
}


.services-cta-grid:has(.services-cta-button:hover)
.project-solution {
    border-color:
        rgba(23, 184, 144, 0.90);

    box-shadow:
        0 0 44px rgba(23, 184, 144, 0.20);
}

/* =========================================================
   Soluciones
========================================================= */

.solutions-section {
    padding: 150px 0;

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

.solutions-grid {
    display: grid;

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

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

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

.solution-card {
    min-height: 470px;

    padding: 46px;

    display: flex;
    flex-direction: column;

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

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

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.solution-card:hover {
    background:
        rgba(255, 255, 255, 0.025);

    transform:
        translateY(-4px);
}

.solution-number {
    display: block;

    margin-bottom: 70px;

    font-size: 12px;

    letter-spacing:
        0.16em;

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

.solution-card-content {
    margin-top: auto;
}

.solution-card h3 {
    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    line-height: 1.1;

    letter-spacing:
        -0.03em;
}

.solution-card p {
    max-width: 540px;

    margin-top: 20px;

    font-size: 17px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

.solution-card ul {
    margin-top: 30px;

    padding: 0;

    list-style: none;
}

.solution-card li {
    position: relative;

    padding:
        10px 0
        10px 20px;

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

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

.solution-card li::before {
    content: '';

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);

    transform:
        translateY(-50%);
}

.solutions-focus {
    padding: 150px 0;

    background:
        var(--color-surface);

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

.solutions-focus-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.8fr);

    gap:
        120px;
}

.solutions-focus-copy h2 {
    max-width: 700px;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.solutions-focus-copy p {
    max-width: 620px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

.solutions-focus-list {
    border-top:
        1px solid var(--color-border);
}

.focus-item {
    display: grid;

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

    gap: 20px;

    padding:
        28px 0;

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

.focus-item > span {
    font-size: 12px;

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

.focus-item h3 {
    font-size: 22px;

    letter-spacing:
        -0.02em;
}

.focus-item p {
    margin-top: 8px;

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

    line-height: 1.7;
}

/* =========================================================
   Soluciones - Microdiagramas
========================================================= */

.solution-card {
    position: relative;

    overflow: hidden;
}


.solution-tech {
    position: absolute;

    right: 42px;
    top: 38px;

    width: 150px;
    height: 110px;

    opacity: 0.68;

    transition:
        opacity 0.6s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


.solution-card:hover .solution-tech {
    opacity: 1;

    transform:
        scale(1.06)
        translateY(-3px);
}

/* =========================================================
   01 - Información dispersa
========================================================= */

.solution-tech-data {
    isolation: isolate;
}


/* Centro */

.data-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 42px;
    height: 42px;

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

    border:
        1px solid rgba(60, 199, 214, 0.50);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.035)
        );

    box-shadow:
        0 0 24px rgba(60, 199, 214, 0.08);

    z-index: 3;
}


.data-center::before {
    content: '';

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(23, 184, 144, 0.32);
}


.data-center-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-glow-green);

    animation:
        solutionDataCore 3s ease-in-out infinite;
}

.data-source {
    position: absolute;

    width: 9px;
    height: 9px;

    border:
        1px solid rgba(60, 199, 214, 0.65);

    background:
        #11161d;

    z-index: 3;
}


.data-source-1 {
    left: 7%;
    top: 15%;
}


.data-source-2 {
    right: 8%;
    top: 20%;
}


.data-source-3 {
    left: 9%;
    bottom: 12%;

    transform:
        rotate(45deg);
}


.data-source-4 {
    right: 7%;
    bottom: 15%;

    transform:
        rotate(45deg);

    border-color:
        rgba(111, 140, 255, 0.60);
}

.data-link {
    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.48),
            transparent
        );

    opacity: 0.48;
}


.data-link-1 {
    width: 72px;

    transform:
        rotate(-145deg);
}


.data-link-2 {
    width: 68px;

    transform:
        rotate(-35deg);
}


.data-link-3 {
    width: 72px;

    transform:
        rotate(145deg);
}


.data-link-4 {
    width: 68px;

    transform:
        rotate(35deg);
}

.data-packet {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    z-index: 5;
}


/* =========================================================
   Datos viajando hacia el núcleo
========================================================= */

.data-packet {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    z-index: 5;
}


/* Superior izquierda */

.data-packet-1 {
    left: 7%;
    top: 15%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 22px rgba(23, 184, 144, 0.38);

    animation:
        dataPacketOne 4.2s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}


/* Superior derecha */

.data-packet-2 {
    right: 8%;
    top: 20%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 12px rgba(60, 199, 214, 0.95),
        0 0 22px rgba(60, 199, 214, 0.38);

    animation:
        dataPacketTwo 4.2s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    animation-delay:
        0.55s;
}


/* Inferior izquierda */

.data-packet-3 {
    left: 9%;
    bottom: 12%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 12px rgba(60, 199, 214, 0.95),
        0 0 22px rgba(60, 199, 214, 0.38);

    animation:
        dataPacketThree 4.2s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    animation-delay:
        1.1s;
}


/* Inferior derecha */

.data-packet-4 {
    right: 7%;
    bottom: 15%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 12px rgba(111, 140, 255, 0.95),
        0 0 22px rgba(111, 140, 255, 0.38);

    animation:
        dataPacketFour 4.2s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    animation-delay:
        1.65s;
}

/* =========================================================
   02 - Procesos manuales
========================================================= */

.solution-tech-process {
    width: 170px;
    height: 115px;
}


.manual-process {
    position: relative;

    width: 100%;
    height: 100%;
}


/* =========================================================
   Tareas manuales repetitivas
========================================================= */

.manual-task {
    position: absolute;

    left: 5px;

    width: 32px;
    height: 20px;

    border:
        1px solid rgba(23, 184, 144, 0.36);

    background:
        rgba(23, 184, 144, 0.025);

    animation:
        manualTaskPulse 3.8s ease-in-out infinite;
}


.manual-task::after {
    content: '';

    position: absolute;

    left: 6px;
    right: 6px;
    top: 50%;

    height: 1px;

    background:
        rgba(23, 184, 144, 0.32);
}


.manual-task-1 {
    top: 10px;
}


.manual-task-2 {
    top: 47px;

    animation-delay:
        0.45s;
}


.manual-task-3 {
    bottom: 10px;

    animation-delay:
        0.9s;
}

.manual-connector {
    position: absolute;

    left: 37px;
    top: 50%;

    width: 37px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.30),
            rgba(60, 199, 214, 0.70)
        );
}


.manual-connector::before,
.manual-connector::after {
    content: '';

    position: absolute;

    left: 0;

    width: 26px;
    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.28),
            rgba(60, 199, 214, 0.55)
        );
}


.manual-connector::before {
    transform:
        rotate(-52deg);
}


.manual-connector::after {
    transform:
        rotate(52deg);
}

.process-auto-core {
    position: absolute;

    left: 47%;
    top: 50%;

    width: 30px;
    height: 30px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.62);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.08),
            rgba(60, 199, 214, 0.04)
        );

    z-index: 3;

    animation:
        processAutoCorePulse 3.4s ease-in-out infinite;
}


.process-auto-core-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);
}

.process-auto-track {
    position: absolute;

    left: 56%;
    right: 4%;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.75),
            rgba(111, 140, 255, 0.42)
        );
}


.process-auto-node {
    position: absolute;

    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        #11161d;

    border:
        1px solid rgba(60, 199, 214, 0.65);

    z-index: 3;
}


.process-auto-node-1 {
    left: 63%;
}


.process-auto-node-2 {
    left: 78%;
}


.process-auto-node-3 {
    left: 94%;

    border-color:
        rgba(111, 140, 255, 0.70);
}

.process-auto-signal {
    position: absolute;

    left: 56%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 22px rgba(23, 184, 144, 0.38);

    z-index: 5;

    animation:
        processAutoSignal 3.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   03 - Falta de visibilidad
========================================================= */

.solution-tech-visibility {
    width: 170px;
    height: 115px;
}


.visibility-dashboard {
    position: relative;

    width: 100%;
    height: 100%;
}


/* Marco */

.visibility-frame {
    position: absolute;

    inset: 4px;

    border:
        1px solid rgba(60, 199, 214, 0.34);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.025),
            rgba(111, 140, 255, 0.015)
        );

    overflow: hidden;
}


.visibility-frame::before {
    content: '';

    position: absolute;

    left: 0;
    right: 0;

    top: 22px;

    height: 1px;

    background:
        rgba(60, 199, 214, 0.18);
}

/* =========================================================
   Barras de indicadores
========================================================= */

.visibility-bar {
    position: absolute;

    bottom: 18px;

    width: 15px;

    border:
        1px solid rgba(23, 184, 144, 0.52);

    background:
        linear-gradient(
            180deg,
            rgba(23, 184, 144, 0.18),
            rgba(23, 184, 144, 0.035)
        );

    transform-origin:
        center bottom;

    animation:
        visibilityBarGrow 4.2s ease-in-out infinite;
}


.visibility-bar-1 {
    left: 18px;

    height: 28px;
}


.visibility-bar-2 {
    left: 43px;

    height: 48px;

    animation-delay:
        0.35s;
}


.visibility-bar-3 {
    left: 68px;

    height: 36px;

    animation-delay:
        0.70s;
}


.visibility-bar-4 {
    left: 93px;

    height: 62px;

    border-color:
        rgba(60, 199, 214, 0.62);

    animation-delay:
        1.05s;
}

/* =========================================================
   Línea de tendencia
========================================================= */

.visibility-line {
    position: absolute;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.78),
            rgba(111, 140, 255, 0.48)
        );

    opacity: 0.65;
}


.visibility-line-1 {
    left: 27px;
    top: 67px;

    width: 34px;

    transform:
        rotate(-19deg);
}


.visibility-line-2 {
    left: 58px;
    top: 56px;

    width: 31px;

    transform:
        rotate(16deg);
}


.visibility-line-3 {
    left: 86px;
    top: 64px;

    width: 47px;

    transform:
        rotate(-32deg);
}

.visibility-point {
    position: absolute;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 12px var(--color-glow-cyan);

    z-index: 4;

    animation:
        visibilityPointPulse 3.4s ease-in-out infinite;
}


.visibility-point-1 {
    left: 27px;
    top: 67px;
}


.visibility-point-2 {
    left: 58px;
    top: 56px;

    animation-delay:
        0.35s;
}


.visibility-point-3 {
    left: 86px;
    top: 64px;

    animation-delay:
        0.70s;
}


.visibility-point-4 {
    left: 126px;
    top: 38px;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 12px var(--color-glow-blue);

    animation-delay:
        1.05s;
}

.visibility-scan {
    position: absolute;

    left: 12px;
    top: 12px;
    bottom: 12px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(23, 184, 144, 0.85),
            rgba(60, 199, 214, 0.85),
            transparent
        );

    box-shadow:
        0 0 12px rgba(60, 199, 214, 0.45);

    z-index: 5;

    animation:
        visibilityScan 4.6s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   04 - Sistemas que no conversan
========================================================= */

.solution-tech-integration {
    width: 170px;
    height: 115px;
}


/* Sistemas */

.integration-system {
    position: absolute;

    top: 50%;

    width: 48px;
    height: 62px;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.04),
            rgba(111, 140, 255, 0.015)
        );

    box-shadow:
        inset 0 0 18px rgba(60, 199, 214, 0.025);

    animation:
        integrationSystemPulse 4s ease-in-out infinite;
}


.integration-system-left {
    left: 6px;
}


.integration-system-right {
    right: 6px;

    animation-delay:
        0.6s;
}


/* Núcleo interno */

.integration-system-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(23, 184, 144, 0.50);

    background:
        rgba(23, 184, 144, 0.045);
}


/* Puertos */

.integration-port {
    position: absolute;

    top: 50%;

    width: 8px;
    height: 8px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 12px var(--color-glow-cyan);

    z-index: 4;
}


.integration-port-left {
    right: -5px;
}


.integration-port-right {
    left: -5px;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 12px var(--color-glow-blue);
}

.integration-link {
    position: absolute;

    left: 53px;
    right: 53px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.30),
            rgba(60, 199, 214, 0.75),
            rgba(111, 140, 255, 0.45)
        );

    opacity: 0.58;
}


.integration-link-top {
    top: 43%;
}


.integration-link-bottom {
    top: 59%;
}

.integration-signal {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    z-index: 5;
}


/* Izquierda → derecha */

.integration-signal-1 {
    left: 53px;
    top: 43%;

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

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    animation:
        integrationSignalForward 3.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}


/* Derecha → izquierda */

.integration-signal-2 {
    right: 53px;
    top: 59%;

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

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 14px var(--color-glow-blue);

    animation:
        integrationSignalBackward 3.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    animation-delay:
        0.9s;
}

.integration-sync {
    position: absolute;

    left: 50%;
    top: 51%;

    width: 24px;
    height: 24px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.40);

    background:
        rgba(60, 199, 214, 0.025);

    z-index: 2;

    animation:
        integrationSyncPulse 3.8s ease-in-out infinite;
}


.integration-sync::before {
    content: '';

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px var(--color-glow-green);
}

/* =========================================================
   05 - Herramientas poco intuitivas
========================================================= */

.solution-tech-intuitive {
    width: 170px;
    height: 115px;
}


.intuitive-ui {
    position: relative;

    width: 100%;
    height: 100%;
}


/* Marco */

.intuitive-frame {
    position: absolute;

    inset: 4px;

    border:
        1px solid rgba(60, 199, 214, 0.34);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.025),
            rgba(111, 140, 255, 0.012)
        );
}

.intuitive-block {
    position: absolute;

    border:
        1px solid rgba(60, 199, 214, 0.48);

    background:
        rgba(60, 199, 214, 0.035);

    transform-origin:
        center;

    animation:
        intuitiveOrganize 5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}


/* Estado inicial deliberadamente irregular */

.intuitive-block-1 {
    left: 14px;
    top: 17px;

    width: 55px;
    height: 25px;

    transform:
        rotate(-7deg);
}


.intuitive-block-2 {
    right: 15px;
    top: 29px;

    width: 42px;
    height: 33px;

    transform:
        rotate(6deg);

    animation-delay:
        0.15s;
}


.intuitive-block-3 {
    left: 26px;
    bottom: 15px;

    width: 72px;
    height: 26px;

    transform:
        rotate(5deg);

    animation-delay:
        0.30s;
}


.intuitive-block-4 {
    right: 18px;
    bottom: 12px;

    width: 32px;
    height: 22px;

    transform:
        rotate(-8deg);

    animation-delay:
        0.45s;
}

.intuitive-focus {
    position: absolute;

    left: 19%;
    top: 25%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 22px rgba(23, 184, 144, 0.38);

    z-index: 5;

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

/* =========================================================
   06 - Crecimiento sin estructura
========================================================= */

.solution-tech-growth {
    width: 170px;
    height: 115px;
}


.growth-system {
    position: relative;

    width: 100%;
    height: 100%;
}


/* Base estructural */

.growth-base {
    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 12px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23, 184, 144, 0.40),
            rgba(60, 199, 214, 0.70),
            rgba(111, 140, 255, 0.40),
            transparent
        );

    box-shadow:
        0 0 12px rgba(60, 199, 214, 0.08);
}

.growth-module {
    position: absolute;

    width: 34px;
    height: 22px;

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        rgba(60, 199, 214, 0.025);

    transform-origin:
        center bottom;

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


.growth-module-1 {
    left: 20px;
    bottom: 13px;
}


.growth-module-2 {
    left: 68px;
    bottom: 13px;

    animation-delay:
        0.35s;
}


.growth-module-3 {
    right: 20px;
    bottom: 13px;

    animation-delay:
        0.70s;
}


.growth-module-4 {
    left: 44px;
    bottom: 48px;

    border-color:
        rgba(23, 184, 144, 0.58);

    animation-delay:
        1.05s;
}


.growth-module-5 {
    right: 43px;
    bottom: 48px;

    border-color:
        rgba(111, 140, 255, 0.58);

    animation-delay:
        1.40s;
}

.growth-link {
    position: absolute;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(60, 199, 214, 0.55),
            transparent
        );

    opacity: 0.55;
}


.growth-link-1 {
    left: 61px;
    bottom: 34px;

    height: 25px;

    transform:
        rotate(28deg);
}


.growth-link-2 {
    left: 85px;
    bottom: 34px;

    height: 30px;
}


.growth-link-3 {
    right: 58px;
    bottom: 34px;

    height: 25px;

    transform:
        rotate(-28deg);
}

.growth-signal {
    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 24px rgba(23, 184, 144, 0.40);

    z-index: 5;

    animation:
        growthSignalRise 5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   Soluciones - Nuestro enfoque
========================================================= */

.focus-item {
    position: relative;

    display: grid;

    grid-template-columns:
        28px
        48px
        minmax(0, 1fr)
        120px;

    gap: 14px;

    align-items: center;

    min-height: 120px;

    padding:
        24px 0;

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

    transition:
        padding-left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.45s ease;
}

.focus-tech {
    position: relative;

    width: 110px;
    height: 78px;

    justify-self: end;

    opacity: 0.55;

    transition:
        opacity 0.5s ease,
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.focus-item:hover .focus-tech {
    opacity: 1;

    transform:
        scale(1.08);
}

.analyze-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    border:
        1px solid rgba(60, 199, 214, 0.38);
}

.analyze-ring-1 {
    width: 60px;
    height: 60px;
}

.analyze-ring-2 {
    width: 38px;
    height: 38px;
}

.analyze-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-glow-green);
}

.analyze-scan {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 32px;
    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.85),
            transparent
        );

    animation:
        focusAnalyzeScan 4s linear infinite;
}

.simplify-block {
    position: absolute;

    width: 26px;
    height: 18px;

    border:
        1px solid rgba(60, 199, 214, 0.38);

    background:
        rgba(60, 199, 214, 0.025);
}

.simplify-block-1 {
    left: 4px;
    top: 6px;

    animation:
        focusSimplifyOne 4.6s ease-in-out infinite;
}

.simplify-block-2 {
    left: 4px;
    top: 30px;

    animation:
        focusSimplifyTwo 4.6s ease-in-out infinite;
}

.simplify-block-3 {
    left: 4px;
    bottom: 6px;

    animation:
        focusSimplifyThree 4.6s ease-in-out infinite;
}

.simplify-result {
    position: absolute;

    right: 8px;
    top: 50%;

    width: 34px;
    height: 34px;

    transform:
        translateY(-50%)
        rotate(45deg);

    border:
        1px solid rgba(23, 184, 144, 0.62);

    background:
        rgba(23, 184, 144, 0.045);

    animation:
        focusSimplifyResult 4.6s ease-in-out infinite;
}

.build-module {
    position: absolute;

    width: 30px;
    height: 22px;

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        rgba(60, 199, 214, 0.03);

    animation:
        focusBuildModule 4.8s ease-in-out infinite;
}

.build-module-1 {
    left: 18px;
    top: 7px;
}

.build-module-2 {
    right: 18px;
    top: 7px;

    animation-delay:
        0.3s;
}

.build-module-3 {
    left: 18px;
    bottom: 7px;

    animation-delay:
        0.6s;
}

.build-module-4 {
    right: 18px;
    bottom: 7px;

    animation-delay:
        0.9s;
}

.evolve-layer {
    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    border:
        1px solid rgba(111, 140, 255, 0.45);

    background:
        rgba(111, 140, 255, 0.025);
}

.evolve-layer-1 {
    bottom: 8px;

    width: 70px;
    height: 15px;
}

.evolve-layer-2 {
    bottom: 27px;

    width: 50px;
    height: 15px;
}

.evolve-layer-3 {
    bottom: 46px;

    width: 30px;
    height: 15px;
}

.evolve-signal {
    position: absolute;

    left: 50%;
    bottom: 8px;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 14px var(--color-glow-blue);

    animation:
        focusEvolveRise 4.6s ease-in-out infinite;
}

/* =========================================================
   Soluciones - Encontramos una solución
========================================================= */

.solutions-final-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, 0.85fr);

    gap: 100px;

    align-items: center;
}


.solution-diagnostic {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 340px;

    justify-self: end;
}


/* Glow general */

.solution-diagnostic::before {
    content: '';

    position: absolute;

    left: 55%;
    top: 50%;

    width: 80%;
    height: 80%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(60, 199, 214, 0.07),
            rgba(23, 184, 144, 0.035) 40%,
            transparent 72%
        );

    filter: blur(20px);
}

/* =========================================================
   Problema
========================================================= */

.diagnostic-problem {
    position: absolute;

    left: 3%;
    top: 50%;

    width: 110px;
    height: 110px;

    transform:
        translateY(-50%);
}


.problem-fragment {
    position: absolute;

    border:
        1px solid rgba(23, 184, 144, 0.45);

    background:
        rgba(23, 184, 144, 0.025);

    animation:
        diagnosticFragmentFloat 4.8s ease-in-out infinite;
}


.problem-fragment-1 {
    left: 2px;
    top: 10px;

    width: 29px;
    height: 20px;

    transform:
        rotate(-12deg);
}


.problem-fragment-2 {
    right: 5px;
    top: 18px;

    width: 24px;
    height: 31px;

    transform:
        rotate(18deg);

    animation-delay:
        0.4s;
}


.problem-fragment-3 {
    left: 15px;
    bottom: 7px;

    width: 38px;
    height: 22px;

    transform:
        rotate(9deg);

    animation-delay:
        0.8s;
}


.problem-fragment-4 {
    right: 8px;
    bottom: 12px;

    width: 25px;
    height: 25px;

    transform:
        rotate(45deg);

    border-color:
        rgba(111, 140, 255, 0.48);

    animation-delay:
        1.2s;
}

/* =========================================================
   Análisis
========================================================= */

.diagnostic-analysis {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 130px;
    height: 130px;

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


.diagnostic-ring {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(60, 199, 214, 0.35);
}


.diagnostic-ring-1 {
    width: 116px;
    height: 116px;
}


.diagnostic-ring-2 {
    width: 72px;
    height: 72px;

    border-style: dashed;

    border-color:
        rgba(23, 184, 144, 0.52);

    animation:
        diagnosticRingRotate 9s linear infinite;
}


.diagnostic-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 22px;
    height: 22px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.85);

    background:
        rgba(60, 199, 214, 0.06);

    box-shadow:
        0 0 22px rgba(60, 199, 214, 0.16);

    animation:
        diagnosticCorePulse 3s ease-in-out infinite;
}


.diagnostic-scanner {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 56px;
    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.95),
            transparent
        );

    box-shadow:
        0 0 10px rgba(60, 199, 214, 0.40);

    animation:
        diagnosticScannerRotate 4s linear infinite;
}

/* =========================================================
   Solución
========================================================= */

.diagnostic-solution {
    position: absolute;

    right: 2%;
    top: 50%;

    width: 105px;
    height: 105px;

    transform:
        translateY(-50%)
        rotate(45deg);

    border:
        1px solid rgba(23, 184, 144, 0.60);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.11),
            rgba(60, 199, 214, 0.035)
        );

    box-shadow:
        0 0 30px rgba(23, 184, 144, 0.10);

    transition:
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}


.diagnostic-solution-frame {
    width: 100%;
    height: 100%;

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


.diagnostic-logo {
    width: 58%;

    transform:
        rotate(-45deg);

    filter:
        drop-shadow(
            0 0 12px rgba(23, 184, 144, 0.28)
        );

    animation:
        diagnosticLogoPulse 4s ease-in-out infinite;
}

/* =========================================================
   Flujo Problema → Análisis → Solución
========================================================= */

.diagnostic-path {
    position: absolute;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.30),
            rgba(60, 199, 214, 0.72)
        );
}


.diagnostic-path-left {
    left: 23%;
    width: 16%;
}


.diagnostic-path-right {
    left: 62%;
    width: 17%;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.72),
            rgba(111, 140, 255, 0.42)
        );
}


.diagnostic-signal {
    position: absolute;

    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    z-index: 5;
}


.diagnostic-signal-left {
    left: 23%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    animation:
        diagnosticSignalIn 4s ease-in-out infinite;
}


.diagnostic-signal-right {
    left: 62%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 14px var(--color-glow-cyan);

    animation:
        diagnosticSignalOut 4s ease-in-out infinite;

    animation-delay:
        1.6s;
}

.solutions-final-grid:has(.solutions-final-button:hover)
.diagnostic-scanner {
    animation-duration:
        1.6s;
}


.solutions-final-grid:has(.solutions-final-button:hover)
.diagnostic-solution {
    transform:
        translateY(-50%)
        rotate(45deg)
        scale(1.08);

    border-color:
        rgba(23, 184, 144, 0.95);

    box-shadow:
        0 0 40px rgba(23, 184, 144, 0.22);
}




/* Línea vertical del proceso */

.solutions-focus-line {
    position: absolute;

    left: 4px;
    top: 34px;
    bottom: 34px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(23, 184, 144, 0.18),
            rgba(60, 199, 214, 0.62),
            rgba(111, 140, 255, 0.38)
        );

    z-index: 1;
}


/* Señal que recorre el proceso */

.solutions-focus-signal {
    position: absolute;

    left: 0;
    top: 34px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px rgba(23, 184, 144, 0.95),
        0 0 24px rgba(23, 184, 144, 0.42);

    z-index: 5;

    animation:
        solutionsFocusTravel 7s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}


/* Cada etapa */

.focus-item {
    position: relative;

    display: grid;

    grid-template-columns:
        28px
        48px
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;

    padding:
        28px 0;

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

    transition:
        padding-left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.45s ease;
}


.focus-item:first-of-type {
    border-top:
        1px solid var(--color-border);
}


/* Hover suave */

.focus-item:hover {
    padding-left: 10px;

    transform:
        translateX(4px);

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.035),
            transparent
        );
}


/* Nodo */

.focus-node {
    position: relative;

    width: 9px;
    height: 9px;

    margin-top: 5px;

    border-radius: 50%;

    background:
        #151d26;

    border:
        1px solid rgba(60, 199, 214, 0.55);

    z-index: 3;

    transition:
        background-color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        scale 0.45s ease;
}


.focus-item:hover .focus-node {
    scale: 1.35;

    background:
        var(--color-primary);

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

    box-shadow:
        0 0 18px rgba(23, 184, 144, 0.55);
}


/* Número */

.focus-number {
    font-size: 12px;

    letter-spacing:
        0.15em;

    color:
        var(--color-primary);

    line-height: 1.4;
}


/* Contenido */

.focus-item-content h3 {
    margin: 0;

    font-size: 20px;

    transition:
        color 0.4s ease,
        transform 0.45s ease;
}


.focus-item-content p {
    margin-top: 10px;

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

    line-height: 1.65;

    transition:
        color 0.4s ease,
        transform 0.45s ease;
}


.focus-item:hover .focus-item-content h3,
.focus-item:hover .focus-item-content p {
    transform:
        translateX(4px);
}


/* =========================================================
   Proyectos
========================================================= */

.projects-section {
    padding: 150px 0;

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

.projects-grid {
    display: grid;

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

    gap: 40px;
}

.project-card {
    border:
        1px solid var(--color-border);

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

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

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

    border-color:
        rgba(23, 184, 144, 0.35);
}

.project-visual {
    min-height: 320px;

    display: flex;
    align-items: flex-end;

    padding: 35px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(23, 184, 144, 0.14),
            rgba(255, 255, 255, 0.015)
        );

    overflow: hidden;
}

.project-visual::before {
    content: '';

    position: absolute;

    width: 280px;
    height: 280px;

    top: 50%;
    left: 50%;

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

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.project-visual::after {
    content: '';

    position: absolute;

    width: 180px;
    height: 180px;

    top: 50%;
    left: 50%;

    border:
        1px solid rgba(23, 184, 144, 0.48);

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.project-visual > .project-number {
    position: absolute;

    left: 35px;
    bottom: 35px;

    z-index: 10;

    font-size: 12px;

    letter-spacing:
        0.18em;

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

.project-content {
    padding: 35px;
}

.project-category {
    display: block;

    margin-bottom: 14px;

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

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

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

.project-content h3 {
    font-size: 30px;

    letter-spacing:
        -0.025em;
}

.project-content p {
    margin-top: 16px;

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

    color:
        var(--color-text-muted);
}

.projects-philosophy {
    padding: 150px 0;

    background:
        var(--color-surface);

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

.projects-philosophy-grid {
    display: grid;

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

    gap: 110px;

    align-items: center;
}

.projects-philosophy-visual {
    display: flex;

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

    min-height: 430px;
}


.projects-philosophy-visual .project-evolution {
    width: 100%;
    max-width: 520px;

    height: 280px;

    margin-top: 0;
}

.projects-philosophy-content {
    max-width: 610px;
}


.projects-philosophy-content h2 {
    margin-top: 20px;

    max-width: 590px;

    font-size:
        clamp(
            46px,
            5vw,
            72px
        );

    line-height: 1.02;

    letter-spacing:
        -0.04em;
}


.projects-philosophy-copy {
    margin-top: 36px;

    max-width: 560px;
}


.projects-philosophy-copy p {
    color:
        var(--color-text-muted);

    font-size: 17px;

    line-height: 1.8;
}


.projects-philosophy-copy p + p {
    margin-top: 24px;
}

.projects-philosophy h2 {
    max-width: 700px;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.projects-philosophy-copy {
    padding-top: 32px;
}

.projects-philosophy-copy p {
    font-size: 18px;

    line-height: 1.85;

    color:
        var(--color-text-muted);
}

.projects-philosophy-copy p + p {
    margin-top: 26px;
}

/* =========================================================
   Proyectos - Sistemas de gestión
========================================================= */

.project-tech {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 220px;
    height: 170px;

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

    z-index: 3;

    pointer-events: none;
}


.project-tech-management {
    opacity: 0.78;

    transition:
        opacity 0.55s ease,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}


.project-card:hover .project-tech-management {
    opacity: 1;

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

.management-panel {
    position: absolute;

    width: 48px;
    height: 34px;

    border:
        1px solid rgba(60, 199, 214, 0.52);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.06),
            rgba(23, 184, 144, 0.025)
        );

    box-shadow:
        inset 0 0 14px rgba(60, 199, 214, 0.025);

    animation:
        managementPanelPulse 4.4s ease-in-out infinite;
}


.management-panel-1 {
    left: 8px;
    top: 10px;
}

.management-panel-2 {
    right: 8px;
    top: 10px;

    animation-delay:
        0.45s;
}

.management-panel-3 {
    left: 8px;
    bottom: 10px;

    animation-delay:
        0.9s;
}

.management-panel-4 {
    right: 8px;
    bottom: 10px;

    animation-delay:
        1.35s;
}

.management-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 28px;
    height: 28px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(23, 184, 144, 0.70);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.04)
        );

    box-shadow:
        0 0 24px rgba(23, 184, 144, 0.10);

    z-index: 4;

    animation:
        managementCorePulse 3.4s ease-in-out infinite;
}


.management-core::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);
}

.management-link {
    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.62),
            transparent
        );

    opacity: 0.55;
}


.management-link-1 {
    width: 78px;

    transform:
        rotate(-145deg);
}


.management-link-2 {
    width: 78px;

    transform:
        rotate(-35deg);
}


.management-link-3 {
    width: 78px;

    transform:
        rotate(145deg);
}


.management-link-4 {
    width: 78px;

    transform:
        rotate(35deg);
}

.management-signal {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    z-index: 6;
}


.management-signal-1 {
    left: 12px;
    top: 14px;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    animation:
        managementSignalOne 4.2s ease-in-out infinite;
}


.management-signal-2 {
    right: 12px;
    bottom: 14px;

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 14px var(--color-glow-blue);

    animation:
        managementSignalTwo 4.6s ease-in-out infinite;

    animation-delay:
        0.7s;
}

/* =========================================================
   Proyectos - Sitios corporativos
========================================================= */

.project-tech-corporate {
    opacity: 0.80;

    transition:
        opacity 0.55s ease,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}


.project-card:hover .project-tech-corporate {
    opacity: 1;

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


/* Marco principal */

.corporate-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 180px;
    height: 125px;

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

    border:
        1px solid rgba(60, 199, 214, 0.48);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.045),
            rgba(23, 184, 144, 0.018)
        );

    box-shadow:
        0 0 24px rgba(60, 199, 214, 0.06);
}


/* Barra superior */

.corporate-topbar {
    position: absolute;

    left: 50%;
    top: 34px;

    width: 180px;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        rgba(60, 199, 214, 0.28);
}


/* Bloques internos */

.corporate-block {
    position: absolute;

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        rgba(60, 199, 214, 0.035);

    animation:
        corporateBlockPulse 4.6s ease-in-out infinite;
}


.corporate-block-1 {
    left: 30px;
    top: 48px;

    width: 92px;
    height: 32px;
}


.corporate-block-2 {
    right: 30px;
    top: 48px;

    width: 42px;
    height: 66px;

    animation-delay:
        0.4s;
}


.corporate-block-3 {
    left: 30px;
    bottom: 24px;

    width: 54px;
    height: 25px;

    animation-delay:
        0.8s;
}


.corporate-block-4 {
    left: 92px;
    bottom: 24px;

    width: 30px;
    height: 25px;

    border-color:
        rgba(111, 140, 255, 0.48);

    animation-delay:
        1.2s;
}

.corporate-signal {
    position: absolute;

    left: 31px;
    top: 49px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    z-index: 5;

    animation:
        corporateSignalTravel 5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   Proyectos - Control e inventario
========================================================= */

.project-tech-inventory {
    opacity: 0.80;

    transition:
        opacity 0.55s ease,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}


.project-card:hover .project-tech-inventory {
    opacity: 1;

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


/* Marco general */

.inventory-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 185px;
    height: 125px;

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

    border:
        1px solid rgba(60, 199, 214, 0.40);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.035),
            rgba(23, 184, 144, 0.018)
        );
}


/* Estanterías */

.inventory-shelf {
    position: absolute;

    left: 30px;
    right: 30px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.28),
            rgba(60, 199, 214, 0.70),
            rgba(111, 140, 255, 0.28)
        );

    opacity: 0.65;
}


.inventory-shelf-1 {
    top: 48px;
}


.inventory-shelf-2 {
    top: 79px;
}


.inventory-shelf-3 {
    top: 110px;
}

.inventory-box {
    position: absolute;

    width: 22px;
    height: 18px;

    border:
        1px solid rgba(60, 199, 214, 0.46);

    background:
        rgba(60, 199, 214, 0.035);

    animation:
        inventoryBoxPulse 4.4s ease-in-out infinite;
}


.inventory-box-1 {
    left: 38px;
    top: 29px;
}


.inventory-box-2 {
    left: 72px;
    top: 29px;

    animation-delay:
        0.35s;
}


.inventory-box-3 {
    left: 109px;
    top: 60px;

    animation-delay:
        0.70s;
}


.inventory-box-4 {
    left: 48px;
    top: 91px;

    border-color:
        rgba(23, 184, 144, 0.58);

    animation-delay:
        1.05s;
}


.inventory-box-5 {
    right: 38px;
    top: 91px;

    border-color:
        rgba(111, 140, 255, 0.58);

    animation-delay:
        1.40s;
}

.inventory-track {
    position: absolute;

    left: 25px;
    right: 25px;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23, 184, 144, 0.28),
            rgba(60, 199, 214, 0.72),
            rgba(111, 140, 255, 0.35),
            transparent
        );

    opacity: 0.55;
}

.inventory-signal {
    position: absolute;

    left: 28px;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    z-index: 5;

    animation:
        inventorySignalTravel 4.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   Proyectos - Procesos digitales
========================================================= */

.project-tech-digital-process {
    opacity: 0.80;

    transition:
        opacity 0.55s ease,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}


.project-card:hover .project-tech-digital-process {
    opacity: 1;

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


/* Línea principal */

.digital-process-track {
    position: absolute;

    left: 18px;
    right: 18px;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.25),
            rgba(60, 199, 214, 0.80),
            rgba(111, 140, 255, 0.42)
        );
}


/* Nodos del recorrido */

.digital-process-node {
    position: absolute;

    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        #101820;

    border:
        1px solid rgba(60, 199, 214, 0.62);

    z-index: 4;
}


.digital-process-node-1 {
    left: 10%;
}


.digital-process-node-2 {
    left: 36%;
}


.digital-process-node-3 {
    left: 64%;
}


.digital-process-node-4 {
    left: 90%;

    border-color:
        rgba(111, 140, 255, 0.70);
}

.digital-process-stage {
    position: absolute;

    top: 50%;

    width: 38px;
    height: 38px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.04),
            rgba(23, 184, 144, 0.018)
        );

    z-index: 2;

    animation:
        digitalProcessStagePulse 4.4s ease-in-out infinite;
}


.digital-process-stage-1 {
    left: 36%;
}


.digital-process-stage-2 {
    left: 64%;

    animation-delay:
        0.55s;
}


.digital-process-stage-3 {
    left: 90%;

    width: 30px;
    height: 30px;

    border-color:
        rgba(111, 140, 255, 0.52);

    animation-delay:
        1.1s;
}

.digital-process-output {
    position: absolute;

    right: 6px;
    top: 22px;

    width: 24px;
    height: 18px;

    border:
        1px solid rgba(111, 140, 255, 0.50);

    background:
        rgba(111, 140, 255, 0.025);

    animation:
        digitalProcessOutputPulse 4.4s ease-in-out infinite;

    animation-delay:
        1.5s;
}

.digital-process-signal {
    position: absolute;

    left: 10%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    z-index: 6;

    animation:
        digitalProcessSignal 5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   Proyectos - Nuestra mirada
========================================================= */

.projects-philosophy-copy {
    position: relative;
}


/* =========================================================
   Arquitectura que evoluciona
========================================================= */

.project-evolution {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 260px;

    margin-top: 55px;

    isolation: isolate;
}


/* Glow ambiental */

.project-evolution::before {
    content: '';

    position: absolute;

    left: 50%;
    bottom: 10px;

    width: 82%;
    height: 75%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(23, 184, 144, 0.09),
            rgba(60, 199, 214, 0.045) 38%,
            transparent 72%
        );

    filter:
        blur(20px);

    z-index: -1;
}

.project-evolution-base {
    position: absolute;

    left: 7%;
    right: 7%;

    bottom: 28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23, 184, 144, 0.45),
            rgba(60, 199, 214, 0.72),
            rgba(111, 140, 255, 0.42),
            transparent
        );

    box-shadow:
        0 0 18px rgba(60, 199, 214, 0.12);
}


.project-evolution-base::before {
    content: '';

    position: absolute;

    left: 50%;
    top: -20px;

    width: 76%;
    height: 40px;

    transform:
        translateX(-50%)
        perspective(180px)
        rotateX(68deg);

    border:
        1px solid rgba(60, 199, 214, 0.18);

    background:
        rgba(60, 199, 214, 0.018);
}

.project-evolution-layer {
    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    border:
        1px solid rgba(60, 199, 214, 0.40);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.045),
            rgba(23, 184, 144, 0.018)
        );

    transform-origin:
        center bottom;

    animation:
        projectEvolutionLayer 5.6s ease-in-out infinite;
}


.project-evolution-layer-1 {
    bottom: 30px;

    width: 250px;
    height: 48px;
}


.project-evolution-layer-2 {
    bottom: 86px;

    width: 190px;
    height: 44px;

    border-color:
        rgba(23, 184, 144, 0.48);

    animation-delay:
        0.55s;
}


.project-evolution-layer-3 {
    bottom: 138px;

    width: 125px;
    height: 40px;

    border-color:
        rgba(111, 140, 255, 0.50);

    animation-delay:
        1.1s;
}

.project-evolution-module {
    position: absolute;

    width: 30px;
    height: 22px;

    border:
        1px solid rgba(60, 199, 214, 0.52);

    background:
        rgba(60, 199, 214, 0.035);

    opacity: 0;

    animation:
        projectEvolutionModule 5.6s ease-in-out infinite;
}


.project-evolution-module-1 {
    left: 15%;
    bottom: 72px;
}


.project-evolution-module-2 {
    right: 14%;
    bottom: 110px;

    border-color:
        rgba(23, 184, 144, 0.55);

    animation-delay:
        0.65s;
}


.project-evolution-module-3 {
    right: 27%;
    top: 28px;

    border-color:
        rgba(111, 140, 255, 0.58);

    animation-delay:
        1.3s;
}

.project-evolution-link {
    position: absolute;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.60),
            transparent
        );

    opacity: 0.42;
}


.project-evolution-link-1 {
    left: 21%;
    bottom: 83px;

    width: 105px;

    transform:
        rotate(-16deg);
}


.project-evolution-link-2 {
    left: 52%;
    bottom: 114px;

    width: 115px;

    transform:
        rotate(-14deg);
}


.project-evolution-link-3 {
    left: 52%;
    top: 88px;

    width: 105px;

    transform:
        rotate(-37deg);
}

.project-evolution-signal {
    position: absolute;

    left: 50%;
    bottom: 28px;

    width: 9px;
    height: 9px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px rgba(23, 184, 144, 0.95),
        0 0 28px rgba(23, 184, 144, 0.40);

    z-index: 5;

    animation:
        projectEvolutionSignal 5.6s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   Proyectos - Próximo proyecto
========================================================= */

.projects-next-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.75fr);

    gap: 110px;

    align-items: center;
}


.projects-next-grid .cta-content {
    max-width: 760px;
}


.next-project-visual {
    position: relative;

    width: 100%;
    max-width: 470px;
    height: 330px;

    justify-self: end;

    isolation: isolate;
}

.next-project-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 72%;
    height: 72%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.10),
            rgba(60, 199, 214, 0.045) 40%,
            transparent 72%
        );

    filter:
        blur(22px);

    animation:
        nextProjectGlow 4.8s ease-in-out infinite;

    z-index: -1;
}

.next-project-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 170px;
    height: 170px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.34);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.025),
            rgba(23, 184, 144, 0.012)
        );

    transition:
        border-color 0.65s ease,
        box-shadow 0.65s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Marco interior */

.next-project-frame::before {
    content: '';

    position: absolute;

    inset: 28px;

    border:
        1px solid rgba(23, 184, 144, 0.26);

    animation:
        nextProjectInnerPulse 4s ease-in-out infinite;
}

.next-project-corner {
    position: absolute;

    width: 22px;
    height: 22px;
}


.corner-1 {
    left: -1px;
    top: -1px;

    border-left:
        2px solid var(--color-primary);

    border-top:
        2px solid var(--color-primary);
}


.corner-2 {
    right: -1px;
    top: -1px;

    border-right:
        2px solid var(--color-accent-cyan);

    border-top:
        2px solid var(--color-accent-cyan);
}


.corner-3 {
    right: -1px;
    bottom: -1px;

    border-right:
        2px solid var(--color-accent-blue);

    border-bottom:
        2px solid var(--color-accent-blue);
}


.corner-4 {
    left: -1px;
    bottom: -1px;

    border-left:
        2px solid var(--color-primary);

    border-bottom:
        2px solid var(--color-primary);
}

.next-project-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 11px;
    height: 11px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px rgba(23, 184, 144, 0.95),
        0 0 32px rgba(23, 184, 144, 0.38);

    animation:
        nextProjectCorePulse 3s ease-in-out infinite;
}

.next-project-module {
    position: absolute;

    width: 36px;
    height: 25px;

    border:
        1px solid rgba(60, 199, 214, 0.48);

    background:
        rgba(60, 199, 214, 0.03);

    animation:
        nextProjectModuleFloat 4.8s ease-in-out infinite;

    transition:
        left 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        right 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        bottom 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease;
}


.module-1 {
    left: 5%;
    top: 19%;
}


.module-2 {
    right: 4%;
    top: 25%;

    animation-delay:
        0.55s;
}


.module-3 {
    left: 10%;
    bottom: 17%;

    animation-delay:
        1.1s;
}


.module-4 {
    right: 8%;
    bottom: 15%;

    border-color:
        rgba(111, 140, 255, 0.50);

    animation-delay:
        1.65s;
}

.next-project-link {
    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.48),
            transparent
        );

    opacity: 0.35;
}


.link-1 {
    width: 175px;

    transform:
        rotate(-145deg);
}


.link-2 {
    width: 170px;

    transform:
        rotate(-35deg);
}


.link-3 {
    width: 175px;

    transform:
        rotate(145deg);
}


.link-4 {
    width: 170px;

    transform:
        rotate(35deg);
}

.projects-next-grid:has(.projects-next-button:hover)
.next-project-frame {
    transform:
        translate(-50%, -50%)
        rotate(45deg)
        scale(1.08);

    border-color:
        rgba(23, 184, 144, 0.88);

    box-shadow:
        0 0 42px rgba(23, 184, 144, 0.18);
}


.projects-next-grid:has(.projects-next-button:hover)
.module-1 {
    left: 31%;
    top: 33%;
}


.projects-next-grid:has(.projects-next-button:hover)
.module-2 {
    right: 31%;
    top: 33%;
}


.projects-next-grid:has(.projects-next-button:hover)
.module-3 {
    left: 31%;
    bottom: 32%;
}


.projects-next-grid:has(.projects-next-button:hover)
.module-4 {
    right: 31%;
    bottom: 32%;
}


/* =========================================================
   Contacto
========================================================= */

.contact-section {
    padding: 150px 0;

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

.contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(520px, 1fr);

    gap: 120px;

    align-items: start;
}

.contact-info h2 {
    max-width: 620px;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height: 1;

    letter-spacing:
        -0.04em;
}

.contact-info > p {
    max-width: 560px;

    margin-top: 28px;

    font-size: 18px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}


/* =========================================================
   Formulario
========================================================= */

.contact-form {
    display: grid;

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

    gap:
        28px 24px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.form-group-full {
    grid-column:
        1 / -1;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--color-text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

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

    border-radius: 0;

    outline: none;

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

    color:
        var(--color-text);

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.form-group input,
.form-group select {
    height: 54px;

    padding:
        0 16px;
}

.form-group textarea {
    min-height: 180px;

    padding: 16px;

    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:
        rgba(23, 184, 144, 0.8);

    background:
        rgba(23, 184, 144, 0.025);

    box-shadow:
        0 0 0 3px
        rgba(23, 184, 144, 0.08);
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    color: var(--color-text);

    background-color: #111820;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--color-text-muted) 50%
        ),
        linear-gradient(
            135deg,
            var(--color-text-muted) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 23px,
        calc(100% - 15px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

    padding-right:
        48px;

    color-scheme:
        dark;
}

.form-group select option {
    background:
        #151b23;

    color:
        #f4f7fb;
}

.form-group select option:disabled {
    color:
        #7f8997;
}

.form-actions {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 10px;
}

.form-actions .btn {
    border: none;

    cursor: pointer;
}

.form-note {
    max-width: 300px;

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

    color:
        var(--color-text-muted);
}

/* =========================================================
   Formulario - Honeypot antispam
========================================================= */

.form-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;
}

/* =========================================================
   Formulario - Estado
========================================================= */

.form-status {
    min-height:
        24px;

    margin-top:
        6px;

    font-size:
        14px;

    line-height:
        1.6;
}


.form-status.is-success {
    color:
        var(--color-primary);
}


.form-status.is-error {
    color:
        #ff7b7b;
}


.contact-form button:disabled {
    opacity:
        0.6;

    cursor:
        not-allowed;

    pointer-events:
        none;
}


/* =========================================================
   Cierre contacto
========================================================= */

.contact-closing {
    padding:
        160px 0;

    background:
        var(--color-surface-soft);

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

.contact-closing h2 {
    max-width: 900px;

    font-size:
        clamp(
            54px,
            7vw,
            96px
        );

    line-height:
        0.96;

    letter-spacing:
        -0.05em;
}

.contact-closing h2 span {
    display: block;

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

/* =========================================================
   Contacto - Conversación
========================================================= */

.contact-dialogue {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 220px;

    margin-top: 50px;
}


/* Extremos */

.dialogue-side {
    position: absolute;

    top: 50%;

    width: 62px;
    height: 62px;

    transform:
        translateY(-50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.36);

    background:
        rgba(60, 199, 214, 0.02);
}


.dialogue-side-left {
    left: 4%;
}


.dialogue-side-right {
    right: 4%;

    border-color:
        rgba(111, 140, 255, 0.42);
}


.dialogue-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 16px var(--color-glow-green);
}


.dialogue-side-right .dialogue-dot {
    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 16px var(--color-glow-blue);
}


/* Líneas */

.dialogue-line {
    position: absolute;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.40),
            rgba(60, 199, 214, 0.70)
        );
}


.dialogue-line-left {
    left: calc(4% + 62px);
    width: 29%;
}


.dialogue-line-right {
    right: calc(4% + 62px);
    width: 29%;

    background:
        linear-gradient(
            90deg,
            rgba(60, 199, 214, 0.70),
            rgba(111, 140, 255, 0.40)
        );
}


/* Núcleo */

.dialogue-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 72px;
    height: 72px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(60, 199, 214, 0.62);

    background:
        linear-gradient(
            145deg,
            rgba(23, 184, 144, 0.08),
            rgba(60, 199, 214, 0.035)
        );

    box-shadow:
        0 0 26px rgba(60, 199, 214, 0.08);

    animation:
        dialogueCorePulse 4s ease-in-out infinite;
}


.dialogue-core-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

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

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 16px var(--color-glow-cyan);
}


/* Señales */

.dialogue-signal {
    position: absolute;

    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    z-index: 5;
}


.dialogue-signal-left {
    left: calc(4% + 62px);

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);

    animation:
        dialogueSignalLeft 4.4s ease-in-out infinite;
}


.dialogue-signal-right {
    right: calc(4% + 62px);

    background:
        var(--color-accent-blue);

    box-shadow:
        0 0 14px var(--color-glow-blue);

    animation:
        dialogueSignalRight 4.4s ease-in-out infinite;

    animation-delay:
        0.7s;
}

/* =========================================================
   Contacto - Cierre
========================================================= */

.contact-closing-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.85fr);

    gap: 110px;

    align-items: center;
}


.contact-closing-content {
    max-width: 760px;
}


.contact-build-visual {
    position: relative;

    width: 100%;
    max-width: 520px;
    height: 330px;

    justify-self: end;

    isolation: isolate;
}

.contact-build-visual::before {
    content: '';

    position: absolute;

    left: 58%;
    top: 50%;

    width: 78%;
    height: 70%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 184, 144, 0.08),
            rgba(60, 199, 214, 0.035) 42%,
            transparent 72%
        );

    filter:
        blur(22px);

    z-index: -1;
}

/* =========================================================
   Ideas
========================================================= */

.contact-ideas {
    position: absolute;

    left: 1%;
    top: 50%;

    width: 125px;
    height: 135px;

    transform:
        translateY(-50%);
}


.contact-idea {
    position: absolute;

    border:
        1px solid rgba(60, 199, 214, 0.46);

    background:
        rgba(60, 199, 214, 0.025);

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


.contact-idea-1 {
    left: 5px;
    top: 8px;

    width: 28px;
    height: 22px;

    transform:
        rotate(-12deg);
}


.contact-idea-2 {
    right: 7px;
    top: 23px;

    width: 33px;
    height: 25px;

    transform:
        rotate(17deg);

    animation-delay:
        0.45s;
}


.contact-idea-3 {
    left: 18px;
    bottom: 12px;

    width: 38px;
    height: 27px;

    transform:
        rotate(8deg);

    border-color:
        rgba(23, 184, 144, 0.52);

    animation-delay:
        0.9s;
}


.contact-idea-4 {
    right: 5px;
    bottom: 20px;

    width: 25px;
    height: 25px;

    transform:
        rotate(45deg);

    border-color:
        rgba(111, 140, 255, 0.52);

    animation-delay:
        1.35s;
}

/* =========================================================
   Camino de construcción
========================================================= */

.contact-build-path {
    position: absolute;

    left: 23%;
    right: 35%;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 184, 144, 0.28),
            rgba(60, 199, 214, 0.78),
            rgba(111, 140, 255, 0.42)
        );
}


.contact-build-signal {
    position: absolute;

    left: 23%;
    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px rgba(23, 184, 144, 0.95),
        0 0 28px rgba(23, 184, 144, 0.38);

    z-index: 6;

    animation:
        contactBuildSignal 4.8s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
}

/* =========================================================
   Solución construida
========================================================= */

.contact-built-system {
    position: absolute;

    right: 2%;
    top: 50%;

    width: 155px;
    height: 155px;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(60, 199, 214, 0.32);

    background:
        linear-gradient(
            145deg,
            rgba(60, 199, 214, 0.035),
            rgba(23, 184, 144, 0.018)
        );

    box-shadow:
        0 0 28px rgba(60, 199, 214, 0.06);
}


.contact-built-system::before {
    content: '';

    position: absolute;

    inset: 20px;

    border:
        1px solid rgba(23, 184, 144, 0.22);

    transform:
        rotate(45deg);

    animation:
        contactBuiltFramePulse 4.5s ease-in-out infinite;
}

.built-module {
    position: absolute;

    width: 30px;
    height: 24px;

    border:
        1px solid rgba(60, 199, 214, 0.48);

    background:
        rgba(60, 199, 214, 0.04);

    animation:
        contactBuiltModulePulse 4.6s ease-in-out infinite;
}


.built-module-1 {
    left: 17px;
    top: 17px;
}


.built-module-2 {
    right: 17px;
    top: 17px;

    animation-delay:
        0.35s;
}


.built-module-3 {
    left: 17px;
    bottom: 17px;

    animation-delay:
        0.70s;
}


.built-module-4 {
    right: 17px;
    bottom: 17px;

    border-color:
        rgba(111, 140, 255, 0.52);

    animation-delay:
        1.05s;
}

.built-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 30px;
    height: 30px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(23, 184, 144, 0.72);

    background:
        rgba(23, 184, 144, 0.075);

    box-shadow:
        0 0 22px rgba(23, 184, 144, 0.12);

    animation:
        contactBuiltCorePulse 3.5s ease-in-out infinite;
}


.built-core::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 14px var(--color-glow-green);
}


/* =========================================================
   Footer
========================================================= */

.site-footer {
    padding:
        90px 0
        30px;

    background:
        #080b0f;

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

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.4fr)
        repeat(3, minmax(150px, 0.6fr));

    gap: 70px;

    padding-bottom: 80px;
}

.footer-brand {
    max-width: 420px;
}

.footer-logo-link {
    display: inline-flex;

    align-items: center;
}

.footer-logo {
    display: block;

    width: auto;
    height: 65px;

    object-fit: contain;
}

.footer-brand p {
    max-width: 380px;

    margin-top: 28px;

    font-size: 15px;
    line-height: 1.8;

    color:
        var(--color-text-muted);
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    display: block;

    margin-bottom: 24px;

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

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

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

.footer-links {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}

.footer-links a,
.footer-contact a,
.footer-contact p {
    font-size: 14px;

    color:
        var(--color-text-muted);
}

.footer-links a,
.footer-contact a {
    transition:
        color 0.25s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
    color:
        var(--color-text);
}

.footer-contact {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 14px;
}

.footer-contact-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    color:
        var(--color-text) !important;
}

.footer-contact-link span {
    transition:
        transform 0.25s ease;
}

.footer-contact-link:hover span {
    transform:
        translateX(5px);
}

.footer-bottom {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 30px;

    padding-top: 28px;

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

    font-size: 12px;

    color:
        var(--color-text-muted);
}

.footer-legal {
    display: flex;

    gap: 24px;
}

.footer-legal a {
    color:
        var(--color-text-muted);

    transition:
        color 0.25s ease;
}

.footer-legal a:hover {
    color:
        var(--color-text);
}

/* =========================================================
   Modal legal
========================================================= */

.legal-modal {
    position: fixed;

    inset: 0;

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

    padding: 32px;

    background:
        rgba(4, 8, 12, 0.76);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 4000;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.legal-modal-backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    z-index: 0;
}


.legal-modal.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   Panel
========================================================= */

.legal-modal-panel {
    position: relative;

    width:
        min(
            900px,
            100%
        );

    max-height:
        82vh;

    max-height:
        82dvh;

    overflow-y: auto;

    padding:
        72px 72px 64px;

    border:
        1px solid rgba(60, 199, 214, 0.18);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(23, 184, 144, 0.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(13, 19, 26, 0.995),
            rgba(15, 27, 32, 0.995)
        );

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.52);

    opacity: 0;

    transform:
        translateY(24px)
        scale(0.98);

    transition:
        opacity 0.35s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    
    z-index: 
        1;
}


.legal-modal.is-open .legal-modal-panel {
    opacity: 1;

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


/* Scrollbar */

.legal-modal-panel {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(23, 184, 144, 0.45)
        rgba(255, 255, 255, 0.025);
}


.legal-modal-panel::-webkit-scrollbar {
    width: 6px;
}


.legal-modal-panel::-webkit-scrollbar-track {
    background:
        rgba(255, 255, 255, 0.02);
}


.legal-modal-panel::-webkit-scrollbar-thumb {
    background:
        rgba(23, 184, 144, 0.45);
}

.legal-modal-close {
    position: absolute;

    top: 28px;
    right: 28px;

    width: 38px;
    height: 38px;

    border: 0;

    padding: 0;

    background:
        transparent;

    cursor: pointer;

    z-index: 5;

    transition:
        transform 0.35s ease;
}


.legal-modal-close:hover {
    transform:
        rotate(90deg);
}


.legal-modal-close span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 25px;
    height: 1px;

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


.legal-modal-close span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.legal-modal-close span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}

.legal-modal-content {
    max-width:
        740px;
}


.legal-modal-content h2 {
    margin-top:
        18px;

    font-size:
        clamp(
            42px,
            5vw,
            62px
        );

    line-height:
        1;

    letter-spacing:
        -0.04em;
}


.legal-modal-date {
    display: block;

    margin-top:
        18px;

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

    font-size:
        12px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.legal-modal-body {
    margin-top:
        48px;

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

    font-size:
        16px;

    line-height:
        1.8;
}


.legal-modal-body section {
    padding:
        30px 0;

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


.legal-modal-body h3 {
    margin-bottom:
        12px;

    color:
        var(--color-text);

    font-size:
        20px;

    line-height:
        1.3;
}


.legal-modal-body p + p {
    margin-top:
        14px;
}


.legal-modal-body a {
    color:
        var(--color-primary);

    transition:
        color 0.25s ease;
}


.legal-modal-body a:hover {
    color:
        var(--color-accent-cyan);
}


body.legal-open {
    overflow:
        hidden;
}