body.page-slug-tu-proceso {
    --process-ink: #061923;
    --process-ink-soft: #0b2935;
    --process-navy: #0d2f3e;
    --process-ivory: #f5f0e7;
    --process-paper: #fbf8f2;
    --process-teal: #83d8d5;
    --process-teal-deep: #2f8585;
    --process-line: rgba(131, 216, 213, .22);
    --process-white: #fffdf8;
    background: var(--process-ink);
}

html.process-motion,
html.process-reduced {
    scroll-behavior: auto;
}

body.page-slug-tu-proceso .process-page {
    position: relative;
    overflow: visible;
    background: var(--process-ink);
}

body.page-slug-tu-proceso .process-page *,
body.page-slug-tu-proceso .process-page *::before,
body.page-slug-tu-proceso .process-page *::after {
    box-sizing: border-box;
}

.process-kicker {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin: 0 0 1.35rem;
    color: var(--process-teal);
    font-family: var(--font-sans, Arial, sans-serif);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .19em;
    line-height: 1.2;
    text-transform: uppercase;
}

.process-kicker::before {
    width: 1.7rem;
    height: 1px;
    background: currentColor;
    content: "";
}

.process-anchor {
    position: absolute;
    top: var(--anchor);
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.robot-story,
.process-bridge,
.process-patient-story-v2 {
    position: relative;
}

html.process-motion .robot-story { height: 620vh; }
html.process-motion .process-bridge { height: 275vh; }
html.process-motion .process-patient-story-v2 { height: 760vh; }

.process-stage {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
}

html.process-motion .process-stage {
    position: sticky;
    top: 0;
    height: 100svh;
}

.process-grid,
.patient-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.process-grid {
    background-image:
        linear-gradient(rgba(131, 216, 213, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(131, 216, 213, .055) 1px, transparent 1px);
    background-position: center;
    background-size: 78px 78px;
    mask-image: linear-gradient(90deg, transparent 0, #000 21%, #000 100%);
}

.process-stage--robot {
    color: var(--process-white);
    background:
        radial-gradient(circle at 75% 48%, rgba(60, 138, 151, .22), transparent 34%),
        radial-gradient(circle at 52% 118%, rgba(131, 216, 213, .1), transparent 37%),
        var(--process-ink);
}

.robot-stage__inner,
.bridge-stage__inner,
.patient-stage__inner {
    position: relative;
    z-index: 2;
    height: 100%;
}

.robot-scanline {
    position: absolute;
    z-index: 4;
    top: 13%;
    right: -20%;
    left: 40%;
    height: 1px;
    opacity: .55;
    background: linear-gradient(90deg, transparent, var(--process-teal), transparent);
    box-shadow: 0 0 24px rgba(131, 216, 213, .55);
}

.robot-hero {
    position: absolute;
    z-index: 5;
    top: 25%;
    left: clamp(1.4rem, 6vw, 6.5rem);
    width: min(43vw, 660px);
}

.robot-hero h1 {
    max-width: 7.7em;
    margin: 0;
    color: var(--process-white);
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(4.5rem, 7.8vw, 9rem);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: .79;
}

.robot-hero h1 span,
.robot-hero h1 em {
    display: block;
}

.robot-hero h1 em {
    margin-left: .26em;
    color: var(--process-teal);
    font-weight: 400;
}

.robot-hero__intro {
    max-width: 37rem;
    margin: 2rem 0 0 .5rem;
    color: rgba(255, 253, 248, .72);
    font-family: var(--font-sans, Arial, sans-serif);
    font-size: clamp(1rem, 1.25vw, 1.24rem);
    line-height: 1.65;
}

.robot-hero__caption {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: 1.6rem 0 0 .5rem;
    color: rgba(255, 253, 248, .45);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.robot-hero__caption i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--process-teal);
    box-shadow: 0 0 13px var(--process-teal);
}

.robot-theatre {
    position: absolute;
    z-index: 3;
    top: 9%;
    right: clamp(-5rem, -2vw, 0rem);
    width: min(59vw, 850px);
    height: 88%;
    pointer-events: none;
}

.robot-core,
.robot-inspection {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-origin: 58% 82%;
    will-change: transform, opacity, filter;
}

.robot-core img,
.robot-core canvas {
    position: absolute;
    width: min(100%, 820px);
    height: min(100%, 1024px);
    object-fit: contain;
    object-position: center bottom;
}

.robot-canvas {
    opacity: 0;
}

.robot-core.is-loaded .robot-canvas { opacity: 1; }
.robot-core.is-loaded .robot-canvas-fallback { opacity: 0; }

.robot-rig {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    perspective: 1400px;
    transform-style: preserve-3d;
    will-change: opacity, transform;
}

.robot-rig__chassis,
.robot-chain,
.robot-joint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    will-change: transform;
}

.robot-rig__chassis > img,
.robot-joint > img {
    position: absolute;
    width: min(100%, 820px);
    height: min(100%, 1024px);
    object-fit: contain;
    object-position: center bottom;
    transform-style: preserve-3d;
    will-change: transform;
}

.robot-rig__chassis { z-index: 1; filter: drop-shadow(0 34px 48px rgba(0, 6, 10, .28)); }
.robot-joint--auxiliary { z-index: 2; }
.robot-chain--left { z-index: 3; }
.robot-chain--center { z-index: 4; }
.robot-chain--right { z-index: 5; }

.robot-joint--left-shoulder,
.robot-joint--left-shoulder > img { transform-origin: 19.5% 24.2%; }
.robot-joint--left-forearm,
.robot-joint--left-forearm > img { transform-origin: 18.4% 35.2%; }
.robot-joint--left-wrist,
.robot-joint--left-wrist > img { transform-origin: 27% 46.4%; }
.robot-joint--left-tool,
.robot-joint--left-tool > img { transform-origin: 28.5% 51.6%; }
.robot-joint--left-secondary,
.robot-joint--left-secondary > img { transform-origin: 29.2% 38%; }
.robot-joint--center-boom,
.robot-joint--center-boom > img { transform-origin: 48.8% 18.8%; }
.robot-joint--camera,
.robot-joint--camera > img { transform-origin: 48.6% 44.3%; }
.robot-joint--center-tool,
.robot-joint--center-tool > img { transform-origin: 48.2% 53.6%; }
.robot-joint--right-boom,
.robot-joint--right-boom > img { transform-origin: 74.5% 33.2%; }
.robot-joint--right-wrist,
.robot-joint--right-wrist > img { transform-origin: 61% 47.2%; }
.robot-joint--right-tool,
.robot-joint--right-tool > img { transform-origin: 59% 51.4%; }
.robot-joint--auxiliary,
.robot-joint--auxiliary > img { transform-origin: 82% 24.5%; }

.robot-joint--left-shoulder > img { animation: processRigShoulder 7.4s ease-in-out infinite; }
.robot-joint--left-forearm > img,
.robot-joint--right-boom > img { animation: processRigElbow 6.6s ease-in-out infinite alternate; }
.robot-joint--camera > img { animation: processRigCamera 5.1s ease-in-out infinite; }
.robot-joint--left-tool > img,
.robot-joint--right-tool > img,
.robot-joint--center-tool > img { animation: processRigTool 4.4s ease-in-out infinite alternate; }

.robot-rig__worklight {
    position: absolute;
    z-index: 7;
    top: 54%;
    left: 49%;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    opacity: .18;
    background: radial-gradient(circle, rgba(131,216,213,.34), rgba(131,216,213,.05) 44%, transparent 72%);
    filter: blur(7px);
    transform: translate(-50%, -50%);
    animation: processRigWorklight 4.8s ease-in-out infinite;
}

.robot-led {
    position: absolute;
    z-index: 8;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(218, 255, 252, .9);
    border-radius: 50%;
    background: var(--process-teal);
    box-shadow: 0 0 5px var(--process-teal), 0 0 17px rgba(131,216,213,.9);
    animation: processLed 2.8s ease-in-out infinite;
}

.robot-led--one { top: 46%; left: 27%; }
.robot-led--two { top: 45%; left: 49%; animation-delay: -.9s; }
.robot-led--three { top: 47%; left: 62%; animation-delay: -1.7s; }

.robot-focus-system {
    position: absolute;
    z-index: 7;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.robot-focus-system > i {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(131,216,213,.28);
    border-radius: 50%;
    opacity: .22;
    transform: translate(-50%, -50%) scale(.72);
    transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}

.robot-focus-system > i::before,
.robot-focus-system > i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--process-teal);
    content: "";
    transform: translate(-50%, -50%);
}
.robot-focus-system > i::before { width: 46px; height: 1px; }
.robot-focus-system > i::after { width: 1px; height: 46px; }
.robot-focus-system > i:nth-child(1) { top: 26%; left: 49%; }
.robot-focus-system > i:nth-child(2) { top: 42%; left: 69%; }
.robot-focus-system > i:nth-child(3) { top: 61%; left: 52%; }
.robot-focus-system > i:nth-child(4) { top: 31%; left: 77%; }
.robot-focus-system > i.is-active {
    border-color: rgba(131,216,213,.9);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: processFocus 2.2s ease-in-out infinite;
}

.robot-focus-system > span {
    position: absolute;
    top: 50%;
    right: 1%;
    width: 25%;
    height: 1px;
    opacity: .34;
    background: linear-gradient(90deg, var(--process-teal), transparent);
    transform-origin: left;
}

.robot-telemetry {
    position: absolute;
    z-index: 7;
    right: 6%;
    bottom: 13%;
    display: flex;
    gap: 5px;
    align-items: end;
    height: 30px;
    opacity: .48;
}

.robot-telemetry i {
    width: 2px;
    height: 38%;
    background: var(--process-teal);
    box-shadow: 0 0 8px rgba(131,216,213,.65);
    animation: processTelemetry 1.8s ease-in-out infinite alternate;
}
.robot-telemetry i:nth-child(2) { height: 72%; animation-delay: -.3s; }
.robot-telemetry i:nth-child(3) { height: 48%; animation-delay: -.7s; }
.robot-telemetry i:nth-child(4) { height: 90%; animation-delay: -1.1s; }
.robot-telemetry i:nth-child(5) { height: 57%; animation-delay: -1.45s; }

.robot-orbit {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 52%;
    border: 1px solid rgba(131, 216, 213, .18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.robot-orbit::before,
.robot-orbit::after {
    position: absolute;
    border-radius: 50%;
    background: var(--process-teal);
    box-shadow: 0 0 18px var(--process-teal);
    content: "";
}

.robot-orbit::before { top: -3px; left: 48%; width: 6px; height: 6px; }
.robot-orbit::after { right: 7%; bottom: 15%; width: 4px; height: 4px; }
.robot-orbit--outer { width: min(72vw, 880px); aspect-ratio: 1; }
.robot-orbit--inner { width: min(48vw, 580px); aspect-ratio: 1; border-style: dashed; opacity: .7; }

.robot-inspection {
    z-index: 6;
    top: 12%;
    right: -1%;
    bottom: auto;
    left: auto;
    width: 61%;
    height: 68%;
    display: block;
    border: 1px solid rgba(131, 216, 213, .24);
    border-radius: 1.6rem;
    opacity: 0;
    visibility: hidden;
    background:
        linear-gradient(145deg, rgba(13, 47, 62, .76), rgba(5, 20, 28, .48)),
        radial-gradient(circle at 72% 38%, rgba(131,216,213,.12), transparent 34%);
    box-shadow: 0 30px 80px rgba(0, 6, 10, .28), inset 0 0 0 1px rgba(255,255,255,.025);
    backdrop-filter: blur(9px);
    transform-origin: 48% 50%;
    will-change: transform, opacity, filter, clip-path;
}

.robot-inspection::before,
.robot-inspection::after {
    position: absolute;
    z-index: 4;
    width: 1.1rem;
    height: 1.1rem;
    border-color: rgba(131,216,213,.76);
    content: "";
}

.robot-inspection::before { top: .75rem; left: .75rem; border-top: 1px solid; border-left: 1px solid; }
.robot-inspection::after { right: .75rem; bottom: .75rem; border-right: 1px solid; border-bottom: 1px solid; }

.robot-inspection__line {
    position: absolute;
    z-index: 5;
    top: 52%;
    right: 100%;
    width: 31%;
    height: 1px;
    opacity: .72;
    background: linear-gradient(90deg, transparent, var(--process-teal));
    box-shadow: 0 0 11px rgba(131,216,213,.38);
    transform: scaleX(.02);
    transform-origin: right;
}

.robot-inspection__image {
    position: absolute;
    z-index: 1;
    inset: 4%;
    width: 92%;
    height: 92%;
    object-fit: contain;
    filter: drop-shadow(0 30px 45px rgba(0, 7, 12, .34));
}

.robot-inspection__hud {
    position: absolute;
    z-index: 3;
    width: min(74%, 590px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(131, 216, 213, .25));
}

.robot-inspection--camera { top: 8%; right: -3%; width: 64%; height: 72%; }
.robot-inspection--camera .robot-inspection__image { inset: 1%; width: 98%; height: 98%; transform: translate(5%, 3%) rotate(3deg); }
.robot-inspection--camera .robot-inspection__hud { top: 13%; right: 3%; }
.robot-inspection--arm .robot-inspection__image { inset: 2%; width: 96%; height: 96%; transform: translate(0, 3%) rotate(-2deg); transform-origin: 72% 19%; }
.robot-inspection--arm .robot-inspection__hud { left: 1%; bottom: 3%; }
.robot-inspection--tools { top: 14%; right: -5%; width: 66%; height: 67%; }
.robot-inspection--tools .robot-inspection__image { inset: 0; width: 100%; height: 100%; transform: translateY(2%); transform-origin: 50% 12%; }
.robot-inspection--tools .robot-inspection__hud { right: -4%; bottom: -1%; }
.robot-inspection--control { top: 8%; right: 1%; width: 57%; height: 73%; }
.robot-inspection--control .robot-inspection__image { inset: 2%; width: 96%; height: 96%; }
.robot-inspection--control .robot-inspection__hud { width: 82%; }

.robot-callouts {
    position: absolute;
    z-index: 8;
    top: 34%;
    left: clamp(1.4rem, 6vw, 6.5rem);
    width: min(35vw, 510px);
}

.robot-callout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.55rem 1.7rem 1.5rem 1.9rem;
    border: 1px solid rgba(131, 216, 213, .22);
    background: linear-gradient(135deg, rgba(8, 35, 45, .91), rgba(7, 26, 35, .63));
    box-shadow: 0 25px 70px rgba(0, 7, 12, .2);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(14px);
    will-change: transform, opacity;
}

.robot-callout::before {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 3px;
    height: calc(100% + 2px);
    background: linear-gradient(var(--process-teal), transparent 88%);
    content: "";
}

.robot-callout::after {
    position: absolute;
    top: 2.8rem;
    left: 100%;
    width: clamp(4rem, 10vw, 10rem);
    height: 1px;
    background: linear-gradient(90deg, var(--process-teal), transparent);
    content: "";
}

.robot-callout__label {
    display: block;
    margin-bottom: .8rem;
    color: var(--process-teal);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.robot-callout h2 {
    margin: 0;
    color: var(--process-white);
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(2.15rem, 3.5vw, 4.3rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .96;
}

.robot-callout > p {
    max-width: 34rem;
    margin: 1.1rem 0 0;
    color: rgba(255, 253, 248, .68);
    font-size: .98rem;
    line-height: 1.62;
}

.robot-callout__metric {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 1.2rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(131, 216, 213, .17);
    color: rgba(255, 253, 248, .42);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .15em;
}

.robot-callout__metric strong {
    color: var(--process-teal);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: -.03em;
}

.robot-status {
    position: absolute;
    z-index: 9;
    top: clamp(6.6rem, 10vh, 8.5rem);
    right: clamp(1.4rem, 4vw, 5rem);
    display: flex;
    gap: 2rem;
    align-items: center;
    color: rgba(255, 253, 248, .48);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.robot-status p { display: flex; gap: .55rem; align-items: center; margin: 0; }
.robot-status p i { width: 6px; height: 6px; border-radius: 50%; background: var(--process-teal); box-shadow: 0 0 12px var(--process-teal); }
.robot-status > span { color: var(--process-teal); }

.robot-progress {
    position: absolute;
    z-index: 9;
    right: clamp(1.4rem, 4vw, 5rem);
    bottom: 2.2rem;
    left: clamp(1.4rem, 6vw, 6.5rem);
    display: flex;
    gap: 1.2rem;
    align-items: center;
    color: rgba(255, 253, 248, .36);
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.robot-progress > i { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(255,255,255,.12); }
.robot-progress b { position: absolute; inset: 0; display: block; background: linear-gradient(90deg, var(--process-teal), rgba(131,216,213,.2)); transform: scaleX(.01); transform-origin: left; }

.process-scroll-cue {
    position: absolute;
    z-index: 10;
    bottom: 4rem;
    left: clamp(1.4rem, 6vw, 6.5rem);
    display: inline-flex;
    gap: .8rem;
    align-items: center;
    color: rgba(255, 253, 248, .55);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

.process-scroll-cue > i { position: relative; width: 1.4rem; height: 2.3rem; border: 1px solid rgba(131,216,213,.45); border-radius: 2rem; }
.process-scroll-cue > i::before { position: absolute; top: .4rem; left: calc(50% - 1px); width: 2px; height: .4rem; border-radius: 3px; background: var(--process-teal); content: ""; }

/* Continuous handoff: robot field becomes the patient's path. */
.process-stage--bridge {
    color: var(--process-ink);
    background: var(--process-ink);
}

.bridge-field {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 74% 42%, rgba(131, 216, 213, .22), transparent 22%),
        linear-gradient(115deg, var(--process-ink) 0 48%, var(--process-ivory) 48.15% 100%);
    background-position: 0 0;
    background-size: 220% 100%;
}

.bridge-field::after {
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 49.5%, transparent 51%);
    content: "";
    transform: translateX(-35%);
}

.bridge-robot {
    position: absolute;
    z-index: 2;
    top: 5%;
    left: 7%;
    width: min(35vw, 490px);
    height: 85%;
    opacity: .84;
}

.bridge-robot img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

.bridge-trajectory {
    position: absolute;
    z-index: 3;
    top: -8%;
    left: 47%;
    width: min(29vw, 430px);
    height: 116%;
}

.bridge-trajectory img { width: 100%; height: 100%; object-fit: contain; opacity: .48; }
.bridge-trajectory i { position: absolute; top: 7%; left: 44%; width: 2px; height: 86%; background: linear-gradient(var(--process-teal), var(--process-teal-deep), transparent); box-shadow: 0 0 15px rgba(131,216,213,.5); transform: scaleY(.05); transform-origin: top; }

.bridge-signal {
    position: absolute;
    z-index: 6;
    top: 10%;
    left: calc(47% + min(12.8vw, 189px));
    width: 24px;
    height: 80%;
    opacity: 0;
    transform: translateX(-50%);
}

.bridge-signal i {
    position: absolute;
    top: 0;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid var(--process-paper);
    border-radius: 50%;
    background: var(--process-teal-deep);
    box-shadow: 0 0 0 8px rgba(131,216,213,.13), 0 0 24px rgba(131,216,213,.85);
    transform: translate(-50%, -50%);
}

.bridge-avatar {
    position: absolute;
    z-index: 5;
    top: 20%;
    left: 56%;
    width: min(24vw, 330px);
    opacity: 0;
    filter: drop-shadow(0 27px 32px rgba(27, 66, 75, .18));
}

.bridge-avatar img { display: block; width: 100%; }

.bridge-copy {
    position: absolute;
    z-index: 7;
    top: 31%;
    right: clamp(1.5rem, 6vw, 6.5rem);
    width: min(38vw, 560px);
    opacity: 0;
}

.bridge-copy .process-kicker { color: var(--process-teal-deep); }
.bridge-copy h2 { margin: 0; color: var(--process-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(3.8rem, 6vw, 7.2rem); font-weight: 400; letter-spacing: -.055em; line-height: .86; }
.bridge-copy h2 span, .bridge-copy h2 em { display: block; }
.bridge-copy h2 em { margin-top: .16em; color: var(--process-teal-deep); font-weight: 400; }
.bridge-copy > p:last-child { max-width: 34rem; margin: 1.7rem 0 0; color: rgba(6,25,35,.65); font-size: 1.02rem; line-height: 1.68; }

/* Patient throughline */
.process-stage--patient {
    color: var(--process-ink);
    background:
        radial-gradient(circle at 25% 52%, rgba(131,216,213,.17), transparent 27%),
        var(--process-ivory);
}

.patient-grid {
    background-image: linear-gradient(90deg, rgba(47,133,133,.065) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.patient-intro {
    position: absolute;
    z-index: 7;
    top: clamp(6.8rem, 12vh, 9rem);
    left: clamp(1.4rem, 6vw, 6.5rem);
    width: min(39vw, 560px);
}

.patient-intro .process-kicker { color: var(--process-teal-deep); }
.patient-intro h2 { margin: 0; color: var(--process-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(3.3rem, 5.3vw, 6.5rem); font-weight: 400; letter-spacing: -.055em; line-height: .88; }
.patient-intro > p:last-child { max-width: 32rem; margin: 1.4rem 0 0; color: rgba(6,25,35,.61); font-size: 1rem; line-height: 1.63; }

.patient-map {
    position: absolute;
    z-index: 3;
    top: 7%;
    bottom: 7%;
    left: -1%;
    width: min(49vw, 700px);
}

.patient-map__art,
.patient-map__geometry {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.patient-map__art { object-fit: fill; opacity: .6; }
.patient-map__geometry { pointer-events: none; }
.patient-map__geometry path { fill: none; stroke: transparent; }

.patient-route-nodes {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
}

.patient-route-nodes i {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(47,133,133,.46);
    border-radius: 50%;
    background: var(--process-ivory);
    box-shadow: 0 0 0 0 rgba(47,133,133,.16);
    transform: translate(-50%, -50%) scale(.75);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.patient-route-nodes i.is-passed {
    border-color: var(--process-teal-deep);
    background: var(--process-teal-deep);
    transform: translate(-50%, -50%) scale(.82);
}

.patient-route-nodes i.is-active {
    border-color: var(--process-teal-deep);
    background: var(--process-paper);
    transform: translate(-50%, -50%) scale(1.2);
    animation: processRouteNode 2.3s ease-out infinite;
}

.patient-avatar {
    position: absolute;
    z-index: 5;
    top: 6.1%;
    left: 22.5%;
    width: clamp(190px, 20vw, 330px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    transform-origin: center bottom;
    filter: drop-shadow(0 28px 28px rgba(23, 63, 75, .18));
    will-change: left, top, transform;
}

.patient-avatar__body {
    position: absolute;
    z-index: 2;
    inset: 0;
    transform-origin: center 72%;
    animation: processAvatarBreath 4.8s ease-in-out infinite;
}

.patient-avatar__aura {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 56%;
    aspect-ratio: 1;
    border: 1px solid rgba(47,133,133,.2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(131,216,213,.24), transparent 67%);
    transform: translate(-50%, -50%) scale(var(--avatar-aura, .84));
    animation: processAvatarAura 3.9s ease-in-out infinite;
}

.patient-avatar img,
.patient-avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.patient-avatar canvas { opacity: 0; }
.patient-avatar.is-loaded canvas { opacity: 1; }
.patient-avatar.is-loaded img { opacity: 0; }

@keyframes processRigShoulder { 0%, 100% { transform: rotate(-.06deg); } 48% { transform: rotate(.1deg); } }
@keyframes processRigElbow { from { transform: rotate(-.08deg) translate3d(0, -.04%, 0); } to { transform: rotate(.12deg) translate3d(.04%, .08%, 0); } }
@keyframes processRigCamera { 0%, 100% { transform: translateY(-.04%) rotate(-.04deg); } 58% { transform: translateY(.11%) rotate(.08deg); } }
@keyframes processRigTool { from { transform: rotate(-.09deg) translateY(-.05%); } to { transform: rotate(.13deg) translateY(.12%); } }
@keyframes processRigWorklight { 0%, 100% { opacity: .12; transform: translate(-50%, -50%) scale(.92); } 52% { opacity: .28; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes processLed { 0%, 100% { opacity: .42; transform: scale(.72); } 45% { opacity: 1; transform: scale(1.08); } }
@keyframes processFocus { 0%, 100% { box-shadow: 0 0 0 0 rgba(131,216,213,.06); } 50% { box-shadow: 0 0 0 13px rgba(131,216,213,.09); } }
@keyframes processTelemetry { from { transform: scaleY(.42); opacity: .35; } to { transform: scaleY(1); opacity: .9; } }
@keyframes processAvatarBreath { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-.45%) scaleY(1.006); } }
@keyframes processAvatarAura { 0%, 100% { opacity: .34; } 50% { opacity: .72; } }
@keyframes processRouteNode { 0% { box-shadow: 0 0 0 0 rgba(47,133,133,.28); } 70%, 100% { box-shadow: 0 0 0 13px rgba(47,133,133,0); } }

.patient-panels {
    position: absolute;
    z-index: 8;
    top: 42%;
    right: clamp(1.5rem, 6vw, 6.5rem);
    width: min(38vw, 540px);
}

.patient-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity, clip-path;
}

.patient-panel:first-child { opacity: 1; visibility: visible; }
.patient-panel__meta { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.25rem; color: var(--process-teal-deep); font-size: .63rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.patient-panel__meta i { flex: 1; max-width: 5.5rem; height: 1px; background: rgba(47,133,133,.42); }
.patient-panel__meta strong { font-weight: 800; }
.patient-panel h3 { margin: 0; color: var(--process-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(3.2rem, 5.4vw, 6.5rem); font-weight: 400; letter-spacing: -.055em; line-height: .88; }
.patient-panel > p { max-width: 31rem; margin: 1.35rem 0 0; color: rgba(6,25,35,.62); font-size: 1.02rem; line-height: 1.68; }

.patient-readout {
    position: absolute;
    z-index: 9;
    right: clamp(1.5rem, 6vw, 6.5rem);
    bottom: 2.4rem;
    left: clamp(1.4rem, 6vw, 6.5rem);
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 1.25rem;
    align-items: center;
    color: rgba(6,25,35,.38);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.patient-readout p { margin: 0; }
.patient-readout strong { color: var(--process-teal-deep); }
.patient-readout > span { position: relative; height: 1px; overflow: hidden; background: rgba(6,25,35,.14); }
.patient-readout > span i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--process-teal-deep), var(--process-teal)); transform: scaleX(.01); transform-origin: left; }

/* Closing action */
.process-cta {
    position: relative;
    min-height: 94svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--process-white);
    text-align: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(131,216,213,.16), transparent 28%),
        var(--process-ink);
}

.process-cta__inner { position: relative; z-index: 2; width: min(84vw, 980px); padding: 8rem 0; }
.process-cta .process-kicker { justify-content: center; }
.process-cta h2 { max-width: 10em; margin: 0 auto; color: var(--process-white); font-family: var(--font-serif, Georgia, serif); font-size: clamp(4rem, 7.8vw, 9rem); font-weight: 400; letter-spacing: -.06em; line-height: .86; }
.process-cta__inner > p:not(.process-kicker) { max-width: 39rem; margin: 2rem auto 0; color: rgba(255,253,248,.66); font-size: 1.05rem; line-height: 1.65; }
.process-cta__button { display: inline-flex; gap: 1.5rem; align-items: center; margin-top: 2.4rem; padding: 1.05rem 1.1rem 1.05rem 1.45rem; border-radius: 999px; color: var(--process-ink); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; background: var(--process-teal); transition: transform .25s ease, background .25s ease; }
.process-cta__button i { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--process-white); font-style: normal; background: var(--process-ink); }
.process-cta__button:hover, .process-cta__button:focus-visible { color: var(--process-ink); background: var(--process-white); transform: translateY(-3px); }
.process-cta small { display: block; max-width: 35rem; margin: 1.4rem auto 0; color: rgba(255,253,248,.34); font-size: .68rem; line-height: 1.5; }

@media (max-width: 1100px) {
    html.process-motion .robot-story { height: 570vh; }
    html.process-motion .process-patient-story-v2 { height: 670vh; }
    .robot-hero { top: 24%; left: 4vw; width: 46vw; }
    .robot-hero h1 { font-size: clamp(4rem, 8.7vw, 7rem); }
    .robot-theatre { right: -8vw; width: 66vw; }
    .robot-callouts { left: 4vw; width: 41vw; }
    .robot-progress { left: 4vw; right: 4vw; }
    .process-scroll-cue { left: 4vw; }
    .bridge-copy, .patient-panels { right: 4vw; width: 42vw; }
    .patient-intro { left: 4vw; width: 44vw; }
    .patient-map { left: 0; width: 54vw; }
    .patient-readout { left: 4vw; right: 4vw; }
}

@media (min-width: 761px) and (max-width: 1060px) {
    body.page-slug-tu-proceso .home-nav-bar {
        display: block !important;
    }
}

@media (max-width: 760px) {
    html.process-motion .robot-story { height: 470vh; }
    html.process-motion .process-bridge { height: 220vh; }
    html.process-motion .process-patient-story-v2 { height: 610vh; }
    .process-grid { background-size: 48px 48px; }
    .robot-scanline { right: -40%; left: 10%; }
    .robot-hero { top: 13%; left: 1.25rem; width: calc(100% - 2.5rem); }
    .robot-hero .process-kicker { margin-bottom: .8rem; }
    .robot-hero h1 { max-width: 6.6em; font-size: clamp(3.55rem, 17vw, 5.25rem); line-height: .8; }
    .robot-hero h1 em { margin-left: .12em; }
    .robot-hero__intro { max-width: 85%; margin-top: 1rem; font-size: .89rem; line-height: 1.48; }
    .robot-hero__caption { display: none; }
    .robot-theatre { top: 23%; right: -23vw; width: 108vw; height: 66%; }
    .robot-orbit--outer { width: 104vw; }
    .robot-orbit--inner { width: 72vw; }
    .robot-inspection { top: 4%; right: -8%; width: 92%; height: 60%; border-radius: 1.1rem; }
    .robot-inspection--camera, .robot-inspection--arm, .robot-inspection--tools, .robot-inspection--control { top: 4%; right: -8%; width: 92%; height: 60%; }
    .robot-inspection__line { width: 20%; }
    .robot-inspection__image { width: 94%; height: 91%; }
    .robot-callouts { top: auto; bottom: 6rem; left: 1rem; width: calc(100% - 2rem); }
    .robot-callout { padding: 1.05rem 1.15rem 1.05rem 1.35rem; background: linear-gradient(135deg, rgba(8,35,45,.98), rgba(5,22,31,.92)); box-shadow: 0 22px 54px rgba(0,7,12,.34); }
    .robot-callout { top: auto; bottom: 0; }
    .robot-callout::after { display: none; }
    .robot-callout__label { margin-bottom: .45rem; font-size: .58rem; }
    .robot-callout h2 { max-width: 10em; font-size: clamp(2rem, 10vw, 3rem); }
    .robot-callout > p { margin-top: .65rem; font-size: .84rem; line-height: 1.42; }
    .robot-callout__metric { margin-top: .7rem; padding-top: .6rem; }
    .robot-callout__metric strong { font-size: 1.2rem; }
    .robot-status { display: none; }
    .robot-progress { right: 1rem; bottom: 1.6rem; left: 1rem; }
    .robot-progress > span { display: none; }
    .process-scroll-cue { bottom: 2.8rem; left: 1.25rem; font-size: .55rem; }
    .process-scroll-cue > i { width: 1.15rem; height: 1.9rem; }

    .bridge-field { background: linear-gradient(155deg, var(--process-ink) 0 38%, var(--process-ivory) 38.2% 100%); }
    .bridge-robot { top: -8%; left: -22%; width: 74vw; height: 61%; }
    .bridge-trajectory { top: 1%; left: 35%; width: 53vw; height: 95%; }
    .bridge-signal { left: 62%; }
    .bridge-avatar { top: 25%; left: 48%; width: min(53vw, 265px); }
    .bridge-copy { top: auto; right: 1.25rem; bottom: 10%; left: 1.25rem; width: auto; }
    .bridge-copy h2 { font-size: clamp(3.2rem, 14vw, 4.7rem); }
    .bridge-copy > p:last-child { margin-top: 1rem; font-size: .9rem; line-height: 1.52; }

    .patient-intro { top: 11%; left: 1.25rem; width: calc(100% - 2.5rem); }
    .patient-intro .process-kicker { margin-bottom: .75rem; }
    .patient-intro h2 { max-width: 8em; font-size: clamp(2.85rem, 12.5vw, 4rem); }
    .patient-intro > p:last-child { max-width: 90%; margin-top: .8rem; font-size: .86rem; line-height: 1.5; }
    .patient-map { top: 7%; bottom: 33%; left: -13%; width: 82vw; }
    .patient-avatar { width: clamp(132px, 37vw, 190px); }
    .patient-panels { top: auto; right: 1.25rem; bottom: 5.5rem; left: 1.25rem; width: auto; min-height: 13rem; padding: 1.15rem 1.2rem; border: 1px solid rgba(47,133,133,.13); background: rgba(251,248,242,.94); backdrop-filter: blur(12px); }
    .patient-panel__meta { margin-bottom: .65rem; font-size: .56rem; }
    .patient-panel h3 { max-width: 10em; font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
    .patient-panel > p { margin-top: .75rem; font-size: .86rem; line-height: 1.47; }
    .patient-readout { right: 1.25rem; bottom: 1.6rem; left: 1.25rem; grid-template-columns: auto 1fr; gap: .7rem; }
    .patient-readout p { display: none; }
    .patient-readout strong { min-width: 5.6rem; }

    .process-cta { min-height: 86svh; }
    .process-cta__inner { width: calc(100% - 2.5rem); padding: 6rem 0; }
    .process-cta h2 { font-size: clamp(3.4rem, 15vw, 5.4rem); }
    .process-cta__inner > p:not(.process-kicker) { margin-top: 1.4rem; font-size: .93rem; }
}

@media (prefers-reduced-motion: reduce) {
    .robot-joint > img,
    .robot-rig__worklight,
    .robot-led,
    .robot-focus-system > i,
    .robot-telemetry i,
    .patient-avatar__body,
    .patient-avatar__aura,
    .patient-route-nodes i { animation: none !important; }
    html.process-motion .robot-story,
    html.process-motion .process-bridge,
    html.process-motion .process-patient-story-v2 { height: auto; }
    html.process-motion .process-stage { position: relative; height: auto; min-height: 100svh; }
    .robot-hero, .robot-theatre, .bridge-copy, .bridge-avatar, .patient-intro { opacity: 1 !important; transform: none !important; }
    .robot-callouts, .patient-panels { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: grid; gap: 1rem; width: auto; margin: 0 1.25rem; padding: 100svh 0 4rem; }
    .robot-callout, .patient-panel { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; }
    .robot-inspection { display: none; }
    .process-stage--bridge { min-height: 100svh; }
    .patient-panels { padding-top: 88svh; }
}

html.process-reduced .robot-story,
html.process-reduced .process-bridge,
html.process-reduced .process-patient-story-v2 { height: auto; }
html.process-reduced .process-stage { position: relative; height: auto; min-height: 100svh; }
html.process-reduced .robot-hero,
html.process-reduced .robot-theatre,
html.process-reduced .bridge-copy,
html.process-reduced .bridge-avatar,
html.process-reduced .patient-intro { opacity: 1 !important; transform: none !important; }
html.process-reduced .robot-callouts,
html.process-reduced .patient-panels { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: grid; gap: 1rem; width: auto; margin: 0 1.25rem; padding: 100svh 0 4rem; }
html.process-reduced .robot-callout,
html.process-reduced .patient-panel { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; }
html.process-reduced .robot-inspection { display: none; }
html.process-reduced .robot-joint > img,
html.process-reduced .robot-rig__worklight,
html.process-reduced .robot-led,
html.process-reduced .robot-focus-system > i,
html.process-reduced .robot-telemetry i,
html.process-reduced .patient-avatar__body,
html.process-reduced .patient-avatar__aura,
html.process-reduced .patient-route-nodes i { animation: none !important; }
html.process-reduced .process-stage--bridge { min-height: 100svh; }
html.process-reduced .patient-panels { padding-top: 88svh; }