:root {
    --bg: #fff;
    --text-high: rgb(48, 51, 59);
    --text-low: rgba(48, 51, 59, 0.2);
    --text-alternative: #708871;
    --white: #fff;
    --font-body: "Karla", sans-serif;
    --font-headline: "Rubik", sans-serif;
    --base-work-width: 7vw;
    --font-size-about: clamp(1px, 1.5vw, 26px);
    --font-size-intro: clamp(1.25rem, 2vw, 3.5rem);
    --project-margin: 10vh 0;
    --size-bg: 35%;
    --construction-guide-color: #00f9e6;
    --construction-guide-stroke: 0.75px;
    /* Visible viewport height for fixed desktop shell.
       100vh is too tall on iPad landscape (browser chrome), so prefer dvh and
       let JS overwrite with the live visualViewport/innerHeight when needed. */
    --app-height: 100vh;
    --app-height: 100dvh;
    --app-top: 0px;

    /* Physiosteo palette */
    --physio-a: #061A33;
    --physio-a-border: rgba(255, 255, 255, 0.15);
    --physio-b: #29405C;
    --physio-b-border: rgba(255, 255, 255, 0.15);
    --physio-c: #3E85DB;
    --physio-c-border: rgba(255, 255, 255, 0.2);
    --physio-d: #536A86;
    --physio-d-border: rgba(255, 255, 255, 0.15);
}

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

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: hidden;
    height: 100%;
    height: var(--app-height);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.project-data-intro-title,
.workspace-filters-title,
.soluciones-filters-title,
.workspace-design-system-content-item-title,
.clinical-report-content-item-title,
.ayunando-details-title,
.ayunando-process-timeline-step-title,
.ayunando-process-timeline-step-heading,
.physiosteo .timeline-step-header .timeline-step-title,
.screen-dual-view-title {
    font-family: var(--font-headline);
    font-weight: 700;
}

#horizontalWrapper {
    height: var(--app-height);
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: var(--app-top);
    left: 0;
    padding: 20px 0;
}

.track {
    display: flex;
    white-space: nowrap;
    height: 100%;
    width: max-content;
    flex-shrink: 0;
    will-change: transform;
}

/* -------------------------------------- INTRO -------------------------------------- */

.intro,
.outro {
    width: 67.5vw;
    min-width: 66.66vw;
    max-height: var(--app-height);
    flex-shrink: 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.outro {
    justify-content: end;
}

.text-up p,
.text-bottom p {
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    font-size: var(--font-size-intro);
    line-height: 1.4;
}

.text-up {
    text-align: left;
    align-self: flex-start;
    color: var(--text-high);
}

.text-up p:first-child,
.text-bottom p:first-child {
    width: 100%;
    text-align: left;
}

.text-up p:nth-child(2),
.text-bottom p:nth-child(1) {
    width: 70%;
    margin-left: 30%;
}

.text-bottom p:nth-child(2) {
    text-align: left;
}

.outro .text-bottom .outro-second {
    width: 100%;
    text-align: left;
}

.text-bottom {
    text-align: right;
    align-self: end;
}

.intro-logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}

.ini {
    width: 28px;
    height: 51px;
    z-index: 99;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ini svg {
    fill: var(--text-high);
    transition: fill 150ms ease-in;
    transform-origin: center;
    will-change: transform;
}

.logo-overlay {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.logo-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.logo-overlay-inner {
    width: 28px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}

.logo-overlay-inner svg {
    fill: var(--bg);
    width: 28px;
    height: 51px;
}

.about {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-low);
    font-size: var(--font-size-about);
}

.intro .about,
.intro .about *,
.outro .about,
.outro .about * {
    font-family: var(--font-body);
    font-weight: 300;
}

.intro .text-up .about {
    color: var(--text-low);
}

.intro .text-up .intro-highlight {
    color: var(--text-high);
}

/* Intro/outro text hover: low ↔ high color flip */
.intro .text-hover-low,
.outro .text-hover-low,
.intro .text-hover-high,
.outro .text-hover-high {
    padding-block: 0.5em;
    margin-block: -0.5em;
    cursor: default;
    transition: color 200ms ease-in-out;
}

.intro .text-hover-low,
.outro .text-hover-low {
    color: var(--text-low);
}

.intro .text-hover-high,
.outro .text-hover-high {
    color: var(--text-high);
}

.intro .text-hover-low:hover,
.outro .text-hover-low:hover {
    color: var(--text-high);
}

.outro .text-hover-high:hover {
    color: var(--text-low);
}

/* Outro email: high by default, goes low when hovering other outro text */
.outro-email {
    color: var(--text-high);
    cursor: pointer;
    transition: color 200ms ease-in-out;
}

.outro-email:hover {
    color: var(--text-high);
}

.outro .text-bottom:has(.text-hover-low:hover) .outro-email {
    color: var(--text-low);
}

/* Intro: hovered segment = high, all others = low */
.intro .text-hover-high:hover {
    color: var(--text-high);
}

.intro .text-up:has(.text-hover-low:hover) .text-hover-high {
    color: var(--text-low);
}

.intro .text-up:has(.text-hover-high:hover) .text-hover-low {
    color: var(--text-low);
}

.outro .text-bottom .about {
    color: var(--text-low);
}

.about img {
    display: block;
    margin-bottom: 12px;
    border-radius: 2px;
    filter: grayscale(1);
}

/* -------------------------------------- WORKS -------------------------------------- */

.works {
    display: flex;
    justify-content: center;
    gap: 0.75vw;
    flex-shrink: 0;
}

.works.expand {
    gap: 6px;
    flex-shrink: 0;
    overflow: visible;
}

.work {
    --project-detail-soft: var(--project-accent, #838EA6);
    border-radius: 4px;
    cursor: pointer;
    transition: filter 250ms ease-out, background 750ms ease-out;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    outline: none;
    position: relative;
    overflow: hidden;
}

.work:hover {
    filter: none;
}

.work.expanded {
    width: 90vw;
    min-width: 90vw;
    height: 100%;
    overflow: hidden;
}

.work.expanded:hover {
    filter: none;
}

.work-logo {
    visibility: hidden;
    position: absolute;
    right: 24px;
    top: 20px;
    height: 45px;
    width: 45px;
    z-index: 110;
    transition: visibility 250ms ease-out;
    filter: opacity(0.8);
}

.work.expanded .work-logo {
    visibility: visible;
}

.work-logo svg,
.work-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.close-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: var(--bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 250ms ease-out;
    z-index: 100;
}

.close-button,
.backward-button,
.forward-button {
    background: var(--bg);
}

.work.expanded .close-button {
    opacity: 1;
}

.work-navigation {
    position: absolute;
    bottom: 20px;
    right: 60px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 250ms ease-out;
    z-index: 100;
}

.work.expanded .work-navigation {
    opacity: 1;
}

.backward-button,
.forward-button {
    width: 30px;
    height: 30px;
    background: var(--bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.backward-button svg path,
.forward-button svg path {
    stroke: var(--text-high);
}

.backward-button {
    padding-right: 1px;
}

.forward-button {
    padding-left: 3px;
}

.close-button:hover,
.backward-button:hover,
.forward-button:hover {
    filter: opacity(1);
    border: 1px solid var(--text-low);
}

.close-button svg path {
    stroke: var(--text-high);
}

.works .work:nth-child(1) {
    width: var(--base-work-width);
    background: #838EA6;
    --project-accent: #838EA6;
    --project-detail-soft: color-mix(in srgb, var(--project-accent) 68%, black 32%);
    --media-skeleton-base: #9aa4b8;
    --media-skeleton-highlight: #b0b8c8;
    --expanded-shadow-tint: rgb(131 142 166 / 75%);
    box-shadow: inset 22px 0 50px 15px rgba(131, 142, 166, 0.25);
}

.work.expanded:nth-child(1) {
    box-shadow: inset 22px 0 50px 15px rgba(131, 142, 166, 0.25);
}

.works .work:nth-child(2) {
    width: calc(var(--base-work-width) * 0.8);
    background: #BCCADC;
    --project-accent: #BCCADC;
    --project-detail-soft: color-mix(in srgb, var(--project-accent) 58%, black 42%);
    --media-skeleton-base: #c6d1df;
    --media-skeleton-highlight: #d9e1ea;
    --expanded-shadow-tint: rgb(188 202 220 / 75%);
}

.works .work:nth-child(3) {
    width: calc(var(--base-work-width) * 0.6667);
    background: #F3D8C3;
    --project-accent: #F3D8C3;
    --project-detail-soft: color-mix(in srgb, var(--project-accent) 54%, black 46%);
    --media-skeleton-base: #ead0bd;
    --media-skeleton-highlight: #f6e5d7;
    --expanded-shadow-tint: rgb(243 216 195 / 75%);
}

.works .work:nth-child(4) {
    width: calc(var(--base-work-width) * 0.5714);
    background: #E89F79;
    --project-accent: #E89F79;
    --project-detail-soft: color-mix(in srgb, var(--project-accent) 58%, black 42%);
    --media-skeleton-base: #df936f;
    --media-skeleton-highlight: #f0b18f;
    --soluciones-panel-bg: #E89F79;
    /* Filters arrows: panel bg + 20% luminosity so they read on the same tone */
    --soluciones-secondary-color: color-mix(in srgb, var(--soluciones-panel-bg) 80%, white 20%);
    --soluciones-guide-stroke: calc(var(--construction-guide-stroke) / 2);
    --expanded-shadow-tint: rgb(232 159 121 / 75%);
}

.works .work:nth-child(5) {
    width: calc(var(--base-work-width) * 0.5);
    background-color: #C47B74;
    --project-accent: #C47B74;
    --project-detail-soft: color-mix(in srgb, var(--project-accent) 46%, white 54%);
    --media-skeleton-base: #b87370;
    --media-skeleton-highlight: #d1928d;
    --expanded-shadow-tint: rgb(196 123 116 / 75%);
}

.works .work:nth-child(6) {
    width: calc(var(--base-work-width) * 0.4444);
    background: #8B5A5A;
    --project-accent: #8B5A5A;
    --project-detail-soft: color-mix(in srgb, var(--project-accent) 42%, white 58%);
    --media-skeleton-base: #815454;
    --media-skeleton-highlight: #a06d6c;
    --expanded-shadow-tint: rgb(139 90 90 / 75%);
}

.works .work.expanded {
    background: var(--project-accent);
}

.lazy-media {
    --lazy-base: var(--media-skeleton-base, color-mix(in srgb, var(--project-accent, #838EA6) 24%, var(--bg)));
    --lazy-highlight: var(--media-skeleton-highlight, color-mix(in srgb, var(--lazy-base) 72%, white 28%));
    background-color: var(--lazy-base);
    background-image: linear-gradient(
        100deg,
        var(--lazy-base) 0%,
        var(--lazy-base) 38%,
        var(--lazy-highlight) 50%,
        var(--lazy-base) 62%,
        var(--lazy-base) 100%
    );
    background-size: 220% 100%;
    animation: lazyMediaShimmer 1.6s ease-in-out infinite;
    transition: background-color 220ms ease, filter 220ms ease;
}

.lazy-media:not(img):not(video) {
    min-height: 1px;
}

.lazy-media.is-loaded,
.lazy-media.is-error {
    animation: none;
    background-image: none;
}

.lazy-media.is-loaded {
    background-color: transparent;
}

.lazy-media.is-error {
    filter: saturate(0.65) opacity(0.72);
}

/* Project lifecycle: closed/off-screen work must not keep consuming animation
   or video compositing time. The active class is managed in script.js. */
.work:not(.is-project-active) .project-data *,
body.is-page-hidden .work .project-data * {
    animation-play-state: paused !important;
}

.work:not(.is-project-active) .project-data .lazy-media,
body.is-page-hidden .lazy-media {
    will-change: auto !important;
}

/* On constrained devices prefer cheaper compositing while preserving the
   structure and timing language of the site. */
body.performance-lite .expanded .shadow::before {
    display: none;
}

body.performance-lite .soluciones-filters-logo-svg:not(.is-logo-revealed):not(.is-finale) {
    filter: none;
    opacity: 0.72;
    will-change: auto;
}

body.performance-lite .physio-execution-card,
body.performance-lite .timeline-step-panel,
body.performance-lite .mobile-entry-media-modal-media {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@keyframes lazyMediaShimmer {
    0% {
        background-position: 160% 0;
    }

    100% {
        background-position: -60% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lazy-media {
        animation: none;
    }
}

.project-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 0px;
    align-items: center;
    color: var(--bg);
    font-size: 12px;
    flex: 1;
    background: transparent;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 80;
}

.expanded .project-info {
    width: fit-content;
    padding: 16px 20px;
}

.project-info span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.project-data {
    width: 0;
    transition: width 1s ease-in-out, opacity 1s ease-in-out;
    overflow: hidden;
    display: none;
    flex: 120;
}

.expanded .project-data {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    gap: 12vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 1;
}

.shadow {
    box-shadow: none;
    transition: all 2s ease-in;
}

.expanded .shadow {
    position: absolute;
    left: 0;
    top: -10%;
    height: 120%;
    width: 150px;
    pointer-events: none;
    z-index: 50;
}

.expanded .shadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        var(--expanded-shadow-tint, rgba(131, 142, 166, 0.75)) 0%,
        color-mix(in srgb, var(--expanded-shadow-tint, rgba(131, 142, 166, 0.75)) 60%, transparent) 30%,
        color-mix(in srgb, var(--expanded-shadow-tint, rgba(131, 142, 166, 0.75)) 20%, transparent) 60%,
        transparent 100%
    );
    pointer-events: none;
}

.expanded .project-data::-webkit-scrollbar {
    display: none;
}

.expanded .project-data>div {
    display: flex;
}

.physio-hero-panel {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    width: 78vw;
    min-width: 78vw;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 2;
}

.physio-hero-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30vw;
    right: 0;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 1vw;
    overflow: hidden;
    transform: translateZ(0);
    transform-style: flat;
}

.physio-hero-bg-slot {
    position: relative;
    height: 100%;
    width: 20vw;
    min-width: 20vw;
    flex-shrink: 0;
    overflow: hidden;
    contain: layout paint;
    transform-style: flat;
}

.physio-hero-bg-slot img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 125%;
    top: -12.5%;
    object-fit: cover;
    object-position: center center;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.physio-hero {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    height: fit-content;
    margin: auto 0;
}

.physio-hero > img {
    width: auto;
    min-width: 60vw;
    max-width: 62vw;
    max-height: 85vh;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    box-shadow: 10px 2px 18px rgba(6, 26, 51, 0.24);
}

.physio-hero-mobile-video {
    display: none;
}

.project-data-about-title {
    color: var(--project-detail-soft);
    font-size: 14px;
    flex: 1;
}

.project-data-about-text {
    white-space: normal;
    font-size: 14px;
    color: var(--project-detail-soft);
    flex: 5;
    line-height: 1.3;
}


/* -------------------------------------- ANJANA PROJECT -------------------------------------- */

.workspace-hero {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    width: 110vw;
    min-width: 110vw;
    height: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 2;
}

.workspace-hero:has(video) {
    border-radius: 12px;
}

.workspace-hero > img {
    position: relative;
    z-index: 2;
    width: auto;
    min-width: 60vw;
    max-width: 62vw;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    box-shadow: 10px 2px 18px rgba(6, 26, 51, 0.24);
}

.workspace-hero video {
    box-shadow: 10px 2px 18px rgba(6, 26, 51, 0.24);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* -------------------------------------- SOLUCIONES EMPRESARIAS PROJECT -------------------------------------- */

.soluciones-showcase {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18vw;
    flex-shrink: 0;
    min-height: min(92vh, 920px);
    padding-right: 10vw;
    overflow: visible;
    box-sizing: border-box;
}

.soluciones-line-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    width: auto;
    height: 250vh;
    left: 0;
    top: 27%;
    transform: translateY(-49%);
    display: block;
    overflow: visible;
}

/* Same tone as Unpacking: Branding arrows (no extra opacity layer) */
.soluciones-line-bg-path {
    stroke: var(--soluciones-secondary-color);
}

.soluciones-showcase .project-data-intro {
    position: relative;
    z-index: 1;
    margin: auto 0 auto 16vw;
}

.soluciones-showcase .soluciones-hero {
    position: relative;
    z-index: 1;
    width: min(58vw, 1040px);
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 4px 5px 8px #00000052;
}

.soluciones-showcase .soluciones-hero video {
    width: 112%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transform: translateX(-5.35%);
}

.soluciones.expanded .project-data > .soluciones-showcase {
    display: flex;
    flex-direction: row;
}

.soluciones.expanded.work {
    filter: none;
}

/* -------------------------------------- AYUNANDO PROJECT -------------------------------------- */

.ayunando-showcase {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10vw;
    flex-shrink: 0;
    min-height: min(92vh, 920px);
    padding-right: 8vw;
    overflow: visible;
    box-sizing: border-box;
}

.ayunando-showcase .project-data-intro {
    position: relative;
    z-index: 1;
    margin: auto 0 auto 16vw;
}

.ayunando-mockup {
    --ayunando-hero-ratio: 986 / 2020;
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(92vh, 920px);
    flex-shrink: 0;
}

.ayunando-mockup-stage {
    /* Reserve the phone footprint before the image loads so overlays stay put. */
    --ayunando-hero-ratio: 986 / 2020;
    position: relative;
    height: 80%;
    aspect-ratio: var(--ayunando-hero-ratio);
    width: auto;
    max-height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: visible;
    /* Soft stand-in while the hero img skeleton paints */
    background-color: color-mix(in srgb, var(--bg, #dcd6cd) 55%, #c4b8a8);
}

.ayunando-hero {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ayunando-hero-ratio);
    display: block;
    object-fit: contain;
    object-position: center center;
    position: relative;
    z-index: 1;
}

.ayunando-hero.is-loaded {
    /* Hide stage stand-in once the phone image is ready */
    background-color: transparent;
}

.ayunando-mockup-stage:has(.ayunando-hero.is-loaded) {
    background-color: transparent;
}

.ayunando-animations {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.ayunando-animation {
    position: absolute;
    overflow: visible;
    filter: drop-shadow(0 6px 18px rgba(45, 45, 45, 0.14));
    box-shadow: 2px 2px 9px #00000082;
}

.ayunando-animation--1,
.ayunando-animation--2 {
    right: 226px;
    width: min(20vw, 168px);
    overflow: visible;
    background: #DCD6CD;
    padding: 2px;
}

.ayunando-animation--1 {
    top: 130px;
    border-radius: 50px;
}

.ayunando-animation--2 {
    top: 373px;
    border-radius: 50%;
    width: 80px;
    left: 267px;
}

.ayunando-schedule {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: calc(80vh - 40px);
    margin: 10vh 5vw;
    min-width: min(42vw, 340px);
}

.ayunando-schedule .ayunando-animation--3 {
    position: relative;
    right: auto;
    top: auto;
    left: auto;
    transform: none;
    width: min(36vw, 200px);
    background: transparent;
    box-shadow: none;
}

.ayunando-animation--1 svg,
.ayunando-animation--2 svg,
.ayunando-animation--3 svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.ayunando-animation--1 .ayunando-ui-outline {
    animation: ayunandoUiOutline 6s ease-in-out infinite;
}

.ayunando-animation--1 .ayunando-ui-filled {
    animation: ayunandoUiFilled 6s ease-in-out infinite;
}

.ayunando-animation--1 .ayunando-ui-start {
    animation: ayunandoUiStartSlide 6s ease-in-out infinite;
}

.ayunando-animation--1 .ayunando-ui-text-s1 {
    animation: ayunandoUiFadeS1 6s ease-in-out infinite;
}

.ayunando-animation--1 .ayunando-ui-text-s2 {
    animation: ayunandoUiFadeS2 6s ease-in-out infinite;
}

.ayunando-animation--2 .ayunando-ui-stop-ring {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-90deg);
    stroke-dasharray: 318.87;
    animation: ayunandoUiStopRing 6s ease-in-out infinite;
}

@keyframes ayunandoUiStopRing {
    0%, 25% { stroke-dashoffset: 239.15; }
    50%, 75% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 239.15; }
}

.ayunando-animation--3 .ayunando-ui-from-line {
    stroke-dasharray: 176.01;
    animation: ayunandoUiDrawFromLine 6s ease-in-out infinite;
}

.ayunando-animation--3 .ayunando-ui-until-line {
    stroke-dasharray: 174;
    animation: ayunandoUiDrawUntilLine 6s ease-in-out infinite;
}

.ayunando-animation--3 .ayunando-ui-sunday-text {
    animation: ayunandoUiRevealSunday 6s ease-in-out infinite;
}

.ayunando-animation--3 .ayunando-ui-monday-text {
    animation: ayunandoUiRevealMonday 6s ease-in-out infinite;
}

@keyframes ayunandoUiDrawFromLine {
    0%, 18% { stroke-dashoffset: 176.01; }
    40%, 60% { stroke-dashoffset: 0; }
    82%, 100% { stroke-dashoffset: 176.01; }
}

@keyframes ayunandoUiDrawUntilLine {
    0%, 18% { stroke-dashoffset: 174; }
    40%, 60% { stroke-dashoffset: 0; }
    82%, 100% { stroke-dashoffset: 174; }
}

@keyframes ayunandoUiRevealSunday {
    0%, 30% { transform: translateY(-35px); }
    48%, 55% { transform: translateY(0); }
    72%, 100% { transform: translateY(-35px); }
}

@keyframes ayunandoUiRevealMonday {
    0%, 30% { transform: translateY(-35px); }
    48%, 55% { transform: translateY(0); }
    72%, 100% { transform: translateY(-35px); }
}

@keyframes ayunandoUiOutline {
    0%, 25% { width: 140.209px; }
    50%, 75% { width: 297.5px; }
    100% { width: 140.209px; }
}

@keyframes ayunandoUiFilled {
    0%, 25% { x: 156.709px; width: 140.709px; rx: 54.5px; }
    50%, 75% { x: 190px; width: 108.009px; rx: 54.0045px; }
    100% { x: 156.709px; width: 140.709px; rx: 54.5px; }
}

@keyframes ayunandoUiStartSlide {
    0%, 25% { transform: translateX(0); }
    50%, 75% { transform: translateX(16.791px); }
    100% { transform: translateX(0); }
}

@keyframes ayunandoUiFadeS1 {
    0%, 20% { opacity: 1; }
    32%, 88% { opacity: 0; }
    97%, 100% { opacity: 1; }
}

@keyframes ayunandoUiFadeS2 {
    0%, 35% { opacity: 0; }
    47%, 68% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

.ayunando.expanded .project-data > .ayunando-showcase,
.ayunando.expanded .project-data > .ayunando-schedule {
    display: flex;
    flex-direction: row;
}

.ayunando-process-timeline {
    --ayunando-timeline-title-color: #2D2D2D;
    --ayunando-timeline-accent: #DCD6CD;
    --ayunando-timeline-muted: #B9B4AD;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96vw;
    min-width: 96vw;
    min-height: calc(60vh - 40px);
    margin: 10vh auto;
    padding: 6vh 0;
    box-sizing: border-box;
    white-space: normal;
}

.ayunando-process-timeline-inner {
    position: relative;
    width: 100%;
    transform: translateY(-3vh);
    --ayunando-timeline-dot-row: 5.5em;
}

.ayunando-process-timeline-rail {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ayunando-process-timeline-rail-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.ayunando-process-timeline-rail-segment {
    position: absolute;
    left: var(--ayunando-rail-x, 0);
    top: var(--ayunando-rail-y, calc(var(--ayunando-timeline-dot-row) - 7px));
    width: var(--ayunando-rail-length, 0);
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    transform: scaleX(0);
    transform-origin: left center;
}

.ayunando-process-timeline-rail-segment.is-visible {
    transform: scaleX(1);
}

.ayunando-process-timeline-steps {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.ayunando-process-timeline-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.ayunando-process-timeline-step-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--ayunando-timeline-dot-row);
    width: 100%;
}

.ayunando-process-timeline-step-title {
    position: absolute;
    left: 50%;
    bottom: 22px;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--ayunando-timeline-title-color);
    transform: translateX(-50%);
    transform-origin: center bottom;
    white-space: nowrap;
}

.ayunando-process-timeline-step-dot {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayunando-process-timeline-step-dot-core {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-high);
    opacity: 0;
    transform: scale(0);
}

.ayunando-process-timeline-step-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--ayunando-timeline-accent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
}

.ayunando-process-timeline-step-dot.is-core-visible .ayunando-process-timeline-step-dot-core {
    opacity: 1;
    transform: scale(1);
}

.ayunando-process-timeline-step-dot.is-ring-visible::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ayunando-process-timeline-step-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 6px;
    max-width: 14.4vw;
}

.ayunando-process-timeline-step-heading {
    font-size: 12px;
    font-weight: 700;
    color: var(--ayunando-timeline-accent);
    line-height: 1.35;
}

.ayunando-process-timeline-step-body {
    font-size: 9px;
    line-height: 1.45;
    color: var(--project-detail-soft);
    opacity: 1;
}

.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-rail-segment {
    transform: scaleX(0);
}

.ayunando-process-timeline.is-ready.is-playing:not(.is-complete) .ayunando-process-timeline-rail-segment.is-visible {
    transform: scaleX(1);
}

.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-dot-core,
.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-title,
.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-heading,
.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-body {
    opacity: 0;
}

.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-dot::before {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
}

.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-dot-core {
    transform: scale(0);
}

.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-title {
    transform: translateX(-50%) translateY(0.85em);
}

.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-heading,
.ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-body {
    transform: translateY(-0.55em);
}

.ayunando-process-timeline.is-playing .ayunando-process-timeline-rail-segment.is-visible {
    transition: transform 0.39s cubic-bezier(0.33, 1, 0.68, 1);
}

.ayunando-process-timeline.is-playing .ayunando-process-timeline-step-dot.is-core-visible .ayunando-process-timeline-step-dot-core {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.225s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ayunando-process-timeline.is-playing .ayunando-process-timeline-step-dot.is-ring-visible::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.21s ease, transform 0.255s cubic-bezier(0.22, 1, 0.36, 1);
}

.ayunando-process-timeline.is-playing .ayunando-process-timeline-step-title.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.27s ease, transform 0.315s cubic-bezier(0.22, 1, 0.36, 1);
}

.ayunando-process-timeline.is-playing .ayunando-process-timeline-step-heading.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease, transform 0.27s cubic-bezier(0.22, 1, 0.36, 1);
}

.ayunando-process-timeline.is-playing .ayunando-process-timeline-step-body.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease 0.03s, transform 0.27s cubic-bezier(0.22, 1, 0.36, 1) 0.03s;
}

@media (prefers-reduced-motion: reduce) {
    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-dot-core,
    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-dot::before,
    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-title,
    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-heading,
    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-body {
        opacity: 1;
        transform: none;
    }

    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-dot-core {
        transform: scale(1);
    }

    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-rail-segment {
        transform: scaleX(1);
    }

    .ayunando-process-timeline.is-playing .ayunando-process-timeline-step-dot.is-core-visible .ayunando-process-timeline-step-dot-core,
    .ayunando-process-timeline.is-playing .ayunando-process-timeline-step-dot.is-ring-visible::before,
    .ayunando-process-timeline.is-playing .ayunando-process-timeline-step-title.is-visible,
    .ayunando-process-timeline.is-playing .ayunando-process-timeline-step-heading.is-visible,
    .ayunando-process-timeline.is-playing .ayunando-process-timeline-step-body.is-visible,
    .ayunando-process-timeline.is-playing .ayunando-process-timeline-rail-segment.is-visible {
        transition: none;
    }
}

.ayunando-details {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    min-width: 80vw;
    width: 80vw;
    height: 74vh;
    margin: auto;
    overflow: hidden;
}

.ayunando-details-title {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    font-size: 20px;
    color: var(--text-high);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ayunando-details-content {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-wrap: auto;
    text-align: center;
    font-size: 12px;
    color: var(--text-high);
    box-sizing: border-box;
    border: 1px dashed #fff;
    border-radius: 8px;
}

.ayunando-details-item {
    box-sizing: border-box;
    border: 1px dashed #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 16px 12px;
    align-self: stretch;
    justify-self: stretch;
    overflow: hidden;
}

.ayunando-details-item-media {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 4px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
}

.ayunando-details-item-media[src] {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ayunando-details-item.item-01 {
    grid-column: 4 / 6;
    grid-row: 1 / 3;
    padding: 8px;
}

.ayunando-details-item.item-02 {
    grid-column: 6 / 9;
    grid-row: 1 / 7;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.ayunando-details-item.item-03 {
    grid-column: 1 / 6;
    grid-row: 3 / 5;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.ayunando-details-item.item-04 {
    grid-column: 1 / 3;
    grid-row: 5 / 7;
    padding: 12px;
    gap: 0;
    align-items: stretch;
    --ayunando-inner-radius: 4px;
}

.ayunando-details-browser {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #000;
    border-radius: var(--ayunando-inner-radius, 4px);
    overflow: hidden;
}

.ayunando-details-browser-chrome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 28px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ayunando-details-browser-controls {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ayunando-details-browser-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ayunando-details-browser-dot-close {
    background: #ff5f57;
}

.ayunando-details-browser-dot-minimize {
    background: #ffbd2e;
}

.ayunando-details-browser-dot-expand {
    background: #28c840;
}

.ayunando-details-browser-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.ayunando-details-browser-code {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 14px 12px 16px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 9px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    white-space: pre;
    tab-size: 2;
}

.ayunando-details-browser-code code {
    font: inherit;
}

.ayunando-details-browser-comment {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.38);
}

.ayunando-details-browser-key {
    color: #7eb8ff;
}

.ayunando-details-browser-arrow {
    color: rgba(255, 255, 255, 0.35);
}

.ayunando-details-browser-value {
    color: #9fe8a8;
}

.ayunando-details-item.item-05 {
    grid-column: 3 / 6;
    grid-row: 5 / 7;
    padding: 12px;
    gap: 0;
    align-items: stretch;
    --ayunando-inner-radius: 4px;
}

.ayunando-details-usage {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px;
    background: #1a1a1a;
    border-radius: var(--ayunando-inner-radius, 4px);
    box-sizing: border-box;
    gap: 8px;
    overflow: hidden;
}

.ayunando-details-usage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.ayunando-details-usage-tabs,
.ayunando-details-usage-filters {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ayunando-details-usage-tab,
.ayunando-details-usage-filter {
    font-size: 8px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.ayunando-details-usage-tab.is-active,
.ayunando-details-usage-filter.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
}

.ayunando-details-usage-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 5px;
    flex-shrink: 0;
}

.ayunando-details-usage-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 7px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.ayunando-details-usage-stat-label {
    font-size: 7px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ayunando-details-usage-stat-value {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ayunando-details-usage-heatmap {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    flex: 1;
    min-height: 0;
    padding: 6px;
    background: #e8e8e8;
    border-radius: var(--ayunando-inner-radius, 4px);
    box-sizing: border-box;
    overflow: hidden;
}

.ayunando-details-usage-heatmap-cell {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 2px;
    background: #ececec;
}

.ayunando-details-usage-heatmap-cell[data-level="1"] {
    background: #d1d1d1;
}

.ayunando-details-usage-heatmap-cell[data-level="2"] {
    background: #a8a8a8;
}

.ayunando-details-usage-heatmap-cell[data-level="3"] {
    background: #2d2d2d;
}

.ayunando-details-usage-footer {
    flex-shrink: 0;
    margin: 0;
    font-size: 7px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.42);
}

.ayunando-details-colors {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 100%;
    font-size: 10px;
    justify-content: space-between;
    box-sizing: border-box;
}

.ayunando-details-color {
    flex: 1;
    padding: 1vh 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--bg);
    border-radius: 4px;
    min-height: 0;
}

.ayunando-details-color-base {
    background-color: #DCD6CD;
    color: #2D2D2D;
}

.ayunando-details-color-main {
    background-color: #2D2D2D;
    color: #DCD6CD;
}

.ayunando-details-color-secondary {
    background-color: #B9B4AD;
    color: #2D2D2D;
}

.ayunando-details-carousel {
    width: 100%;
    height: 100%;
    padding: 12px 0;
    overflow: hidden;
    position: relative;
}

.ayunando-details-carousel-track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    gap: 12px;
    padding: 0 6px;
    box-sizing: border-box;
    animation: ayunandoDetailsCarousel 42s linear infinite;
    will-change: transform;
}

.ayunando-details-carousel-image {
    display: block;
    height: 100%;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
}

@keyframes ayunandoDetailsCarousel {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* -------------------------------------- PROJECT TIMELINE -------------------------------------- */

.physiosteo .project-data .project-timeline {
    /* --physio-vh tracks the project panel height (set in JS) so iPad landscape
       matches desktop spacing without changing the stair/title geometry. */
    --physio-vh: 1vh;
    --physio-timeline-width: 130vw;
    --physio-panel-preferred-vw: 60;
    --physio-step-x: 18vw;
    --physio-step-left-shift: -10px;
    --physio-step-width: var(--physio-timeline-width);
    --physio-step-y: var(--physio-path-v);
    --physio-step-y-px: 0px;
    --physio-path-unit: calc(var(--physio-vh) * 7);
    --physio-path-v: calc(var(--physio-path-unit) * 2);
    --physio-path-v-expanded: calc(var(--physio-vh) * 64);
    --physio-path-corner: 22px;
    --physio-timeline-start-x: 0.8vw;
    --physio-timeline-start-y: calc(var(--physio-vh) * 0.6);
    /* Keep titles + open panels the same distance from each stair corner. */
    --physio-step-content-line-gap: 8px;
    --physio-step-content-gutter: clamp(16px, 1.2vw, 24px);
    --physio-timeline-span: var(--physio-timeline-width);
    --physio-timeline-min-h: calc(var(--physio-vh) * 70);
    --physio-timeline-height: max(
        var(--physio-timeline-min-h),
        calc(var(--physio-timeline-start-y) + var(--physio-path-v) * 4 + var(--physio-vh) * 12)
    );
    --physio-panel-max-h: calc(var(--physio-vh) * 51);
    --physio-panel-width: min(60vw, 980px);
    margin: 0;
    align-self: flex-start;
    width: var(--physio-timeline-span);
    min-width: var(--physio-timeline-span);
    max-width: var(--physio-timeline-width);
    max-height: none;
    height: var(--physio-timeline-height);
    min-height: var(--physio-timeline-height);
    overflow: hidden;
    position: relative;
    padding: calc(var(--physio-vh) * 2) 0 calc(var(--physio-vh) * 3);
    box-sizing: border-box;
    transition: height 0.5s cubic-bezier(0.33, 1, 0.68, 1),
        min-height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (min-width: 1441px) {
    .physiosteo .project-data .project-timeline {
        --physio-step-content-line-gap: 16px;
    }
}

.physiosteo .project-data .project-timeline.is-animating {
    transition: none;
    align-self: flex-start;
    margin-top: 0;
    margin-bottom: 0;
}

.physiosteo .project-data .project-timeline::before {
    display: none;
}

.physio-timeline-connector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

.physio-timeline-connector-path {
    vector-effect: non-scaling-stroke;
    stroke: #fff;
}

.physiosteo .project-timeline .timeline-step {
    position: absolute;
    width: var(--physio-step-width);
    max-width: var(--physio-timeline-width);
    will-change: top, left, width;
    z-index: 2;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    /* Titles sit under the white path, same vertical rhythm as before. */
    padding-top: calc(var(--physio-vh) * 8.2);
    padding-left: 0;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    transition: top 0.5s cubic-bezier(0.33, 1, 0.68, 1),
        left 0.5s cubic-bezier(0.33, 1, 0.68, 1),
        width 0.5s cubic-bezier(0.33, 1, 0.68, 1),
        padding-top 0.5s cubic-bezier(0.33, 1, 0.68, 1),
        padding-left 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.physiosteo .project-timeline[data-has-expanded] .timeline-step:not([data-expanded]) {
    padding-top: calc(var(--physio-vh) * 1.2);
    padding-left: clamp(18px, 2.4vw, 44px);
}

.physiosteo .project-timeline.is-animating .timeline-step {
    transition: none;
}

.physiosteo .project-timeline .timeline-step[data-step="1"] {
    left: var(--physio-step-left-shift);
    top: var(--physio-timeline-start-y, 0.6vh);
}

.physiosteo .project-timeline .timeline-step[data-step="2"] {
    left: calc(var(--physio-step-x) * 1 + var(--physio-step-left-shift));
    top: calc(var(--physio-timeline-start-y, 0.6vh) + var(--physio-path-v) * 1);
}

.physiosteo .project-timeline .timeline-step[data-step="3"] {
    left: calc(var(--physio-step-x) * 2 + var(--physio-step-left-shift));
    top: calc(var(--physio-timeline-start-y, 0.6vh) + var(--physio-path-v) * 2);
}

.physiosteo .project-timeline .timeline-step[data-step="4"] {
    left: calc(var(--physio-step-x) * 3 + var(--physio-step-left-shift));
    top: calc(var(--physio-timeline-start-y, 0.6vh) + var(--physio-path-v) * 3);
}

.physiosteo .project-timeline .timeline-step[data-step="5"] {
    left: calc(var(--physio-step-x) * 4 + var(--physio-step-left-shift));
    top: calc(var(--physio-timeline-start-y, 0.6vh) + var(--physio-path-v) * 4);
}

.physiosteo .project-timeline .timeline-step[data-expanded] {
    z-index: 5;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 0;
    max-height: none;
    width: var(--physio-timeline-width);
    overflow: visible;
    padding-top: calc(var(--physio-vh) * 1.2);
    padding-left: 0;
}

.physiosteo .project-timeline .timeline-step-header {
    width: max-content;
    min-width: min(16vw, 320px);
    max-width: min(24vw, 460px);
    padding: calc(var(--physio-vh) * 1.35) min(2vw, 32px) calc(var(--physio-vh) * 1.35) var(--physio-step-content-gutter);
    min-height: unset;
    align-items: flex-end;
    position: relative;
    pointer-events: auto;
    margin-left: 0;
    border-radius: 0;
}

.physiosteo .project-timeline .timeline-step-header::before {
    display: none;
}

.physiosteo .timeline-step-header .timeline-step-title {
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-high);
    flex: 0 0 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    transition: color 180ms ease, opacity 180ms ease, font-size 300ms ease;
}

.physiosteo .project-timeline[data-has-expanded] .timeline-step:not([data-expanded]) .timeline-step-title {
    font-size: clamp(0.78rem, 1.15vw, 1.35rem) !important;
    opacity: 0.18;
}

.physiosteo .project-timeline .timeline-step[data-expanded] .timeline-step-title {
    font-size: clamp(1.4rem, 2.2vw, 2.35rem) !important;
    opacity: 0.85;
}

.physiosteo .project-timeline .timeline-step-header:hover .timeline-step-title,
.physiosteo .project-timeline .timeline-step-header:focus-visible .timeline-step-title {
    color: var(--project-detail-soft);
    opacity: 1;
}

.physiosteo .project-timeline .timeline-step-panel[data-open] {
    height: calc(var(--physio-vh) * 53);
    margin-top: calc(var(--physio-vh) * 3.2);
    margin-left: var(--physio-step-content-gutter);
    width: var(--physio-panel-width);
    max-width: var(--physio-panel-width);
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    pointer-events: auto;
}

.physiosteo .project-timeline .timeline-step-panel-inner {
    overflow: hidden;
    max-height: var(--physio-panel-max-h, min(51vh, 100%));
    max-width: 100%;
    min-height: 0;
}

.physiosteo .project-timeline .timeline-step-panel[data-open] .timeline-step-panel-inner {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.physiosteo .project-timeline .timeline-step-panel {
    transition: none;
}

.physiosteo .project-timeline .timeline-step-panel[data-opening] {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.physiosteo .project-timeline .timeline-step-panel[data-open] {
    transition: opacity 140ms ease;
}

.timeline-step {
    display: grid;
    grid-template-rows: auto 0fr;
    flex: 0 0 auto;
    transition: grid-template-rows 0.55s cubic-bezier(0.33, 1, 0.68, 1),
        flex-grow 0.55s cubic-bezier(0.33, 1, 0.68, 1);
    position: relative;
}

.physiosteo .project-timeline.is-animating .timeline-step {
    transition: none;
}

.timeline-step[data-expanded] {
    grid-template-rows: auto 1fr;
    flex: 1 0 auto;
}

.timeline-step-header {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0px;
    position: relative;
}

/* Timeline circle — alineado al centro del título (padding 16px + 8px mitad del texto) */
.timeline-step-header::before {
    content: '';
    position: absolute;
    left: -24px; /* desde header left: -(28px padding) + (8px línea) - (4px radio) = -24px */
    top: 24px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--text-low);
    transition: border-color 300ms ease;
    z-index: 2;
}

.timeline-step[data-expanded] .timeline-step-header::before {
    border-color: var(--text-high);
}

.timeline-step-header .timeline-step-title {
    color: var(--text-high);
    flex: 0 0 auto;
    min-width: 0;
    text-align: left;
}

.timeline-step-header .timeline-step-summary {
    display: none;
    flex: 1;
    padding-left: 16px;
    font-size: 12px;
    font-weight: 400;
    color: var(--project-detail-soft);
    white-space: normal;
    text-align: left;
    line-height: 1.5;
    overflow: hidden;
    align-self: flex-start;
}

.timeline-step[data-expanded] .timeline-step-header .timeline-step-summary {
    display: block;
}

.timeline-step-panel {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    min-height: 0;
    transition: opacity 280ms ease 60ms;
}

.timeline-step-panel[data-open] {
    opacity: 1;
    pointer-events: auto;
}

.timeline-step-panel-inner {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 16px 0;
}

.timeline-step-panel .timeline-step-image {
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
    /* shrinks faster than text, but never below 5vh */
    flex: 0 3 auto;
    min-height: 5vh;
}

.timeline-step-panel .timeline-step-image img,
.timeline-step-panel .timeline-step-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.timeline-step-panel .timeline-step-image video {
    max-height: 28vh;
    min-height: 5vh;
}

.figma-embed-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    height: 100%;
    max-height: 100%;
}

.physiosteo .figma-embed-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
}

.figma-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.wireframe-paper {
    border-radius: 4px;
    background-image: radial-gradient(circle, rgba(48, 51, 59, 0.22) 1px, transparent 1px);
    background-size: 14px 14px;
    flex: 1 1 auto;
    min-height: 30vh;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.wf-img {
    position: absolute;
    border-radius: 3px;
    box-shadow: 0 2px 12px rgba(48, 51, 59, 0.15);
    object-fit: cover;
    max-height: 90%;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    transition: box-shadow 150ms ease;
}

.wf-img:active,
.wf-img.wf-dragging {
    cursor: grabbing;
    box-shadow: 0 6px 24px rgba(48, 51, 59, 0.22);
}

.tech-stack-diagram {
    --tsd-ink: #071b35;
    --tsd-muted: #667c9b;
    --tsd-blue: #3e85db;
    --tsd-blue-soft: rgba(62, 133, 219, 0.14);
    --tsd-surface: #e8edf4;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    white-space: normal;
    isolation: isolate;
}

.tsd-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(22px, 2.4vw, 32px) minmax(0, 1.14fr) clamp(22px, 2.4vw, 32px) minmax(0, 1fr);
    align-items: stretch;
    gap: 0 clamp(2px, 0.4vw, 6px);
    min-height: clamp(220px, 34vh, 320px);
    padding: clamp(6px, 0.8vh, 10px) clamp(4px, 0.6vw, 8px);
    background: transparent;
    border: none;
    box-shadow: none;
}

.tsd-board::before {
    content: "";
    position: absolute;
    inset: clamp(38px, 5.5vh, 52px) clamp(18%, 22%, 26%) auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(62, 133, 219, 0.18) 12%,
        rgba(62, 133, 219, 0.42) 50%,
        rgba(62, 133, 219, 0.18) 88%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.tsd-column {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
}

.tsd-col-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 12px);
    width: 100%;
    min-height: 0;
    padding: clamp(8px, 1vh, 10px);
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(236, 242, 250, 0.62));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 28px rgba(41, 64, 92, 0.14);
    backdrop-filter: blur(8px);
    transition:
        transform 320ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 320ms cubic-bezier(0.33, 1, 0.68, 1);
}

.tsd-column--featured .tsd-col-panel {
    transform: translateY(-4px);
    padding: clamp(10px, 1.2vh, 12px);
    background:
        radial-gradient(circle at 88% 8%, rgba(62, 133, 219, 0.22), transparent 38%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(228, 238, 252, 0.55));
    border-color: rgba(62, 133, 219, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 22px 38px rgba(41, 64, 92, 0.2),
        0 0 0 1px rgba(62, 133, 219, 0.12);
}

.tsd-col-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 20px 34px rgba(41, 64, 92, 0.2);
}

.tsd-column--featured .tsd-col-panel:hover {
    transform: translateY(-6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 26px 42px rgba(41, 64, 92, 0.24),
        0 0 0 1px rgba(62, 133, 219, 0.2);
}

.tsd-col-header {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.9vw, 10px);
    padding: clamp(8px, 1vh, 10px) clamp(10px, 1.1vw, 12px);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(62, 133, 219, 0.28), transparent 52%),
        linear-gradient(145deg, #06182f 0%, #0a213d 52%, #12314f 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tsd-column--featured .tsd-col-header {
    background:
        radial-gradient(circle at 100% 0%, rgba(62, 133, 219, 0.55), transparent 48%),
        linear-gradient(145deg, #06182f 0%, #0d2a4d 42%, #1a4a7a 100%);
    border-color: rgba(62, 133, 219, 0.35);
}

.tsd-col-icon {
    flex-shrink: 0;
    width: clamp(26px, 2.4vw, 30px);
    height: clamp(26px, 2.4vw, 30px);
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.tsd-col-icon svg {
    width: 62%;
    height: 62%;
    fill: currentColor;
    stroke: none;
}

.tsd-col-label {
    font-size: clamp(0.62rem, 0.78vw, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--project-detail-soft);
}

.tsd-col-items {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vh, 8px);
    min-height: 0;
}

.tsd-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(8px, 0.9vw, 10px);
    padding: clamp(8px, 1vh, 10px) clamp(9px, 1vw, 11px);
    border-radius: 8px;
    color: var(--tsd-ink);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.78));
    border: 1px solid rgba(130, 151, 181, 0.34);
    box-shadow:
        inset 0 -1px 0 rgba(83, 106, 134, 0.1),
        0 8px 14px rgba(64, 84, 111, 0.1);
    transition:
        transform 260ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 260ms cubic-bezier(0.33, 1, 0.68, 1),
        border-color 260ms ease,
        background 260ms ease;
}

.tsd-item:hover {
    transform: translateY(-2px);
    border-color: rgba(62, 133, 219, 0.42);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 255, 0.9));
    box-shadow:
        inset 0 -1px 0 rgba(83, 106, 134, 0.12),
        0 12px 20px rgba(64, 84, 111, 0.16);
}

.tsd-item--primary {
    border-color: rgba(62, 133, 219, 0.38);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(230, 240, 255, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(62, 133, 219, 0.12),
        0 10px 18px rgba(62, 133, 219, 0.14);
}

.tsd-item-icon {
    flex-shrink: 0;
    width: clamp(24px, 2.2vw, 28px);
    height: clamp(24px, 2.2vw, 28px);
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--tsd-blue);
    background: var(--tsd-blue-soft);
    border: 1px solid rgba(62, 133, 219, 0.22);
    transition: background 260ms ease, color 260ms ease;
}

.tsd-item:hover .tsd-item-icon {
    background: rgba(62, 133, 219, 0.22);
}

.tsd-item-icon svg {
    width: 58%;
    height: 58%;
    fill: currentColor;
    stroke: none;
}

.tsd-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tsd-item-name {
    font-size: clamp(0.68rem, 0.82vw, 0.8rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--tsd-ink);
}

.tsd-item-desc {
    font-size: clamp(0.58rem, 0.68vw, 0.68rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--tsd-muted);
}

.tsd-bridge {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    min-height: 28px;
    color: rgba(62, 133, 219, 0.72);
}

.tsd-bridge-node {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(62, 133, 219, 0.55);
    box-shadow: 0 0 0 3px rgba(62, 133, 219, 0.12);
}

.tsd-bridge-line {
    flex: 1;
    height: 1px;
    min-width: 4px;
    background: linear-gradient(90deg, rgba(62, 133, 219, 0.2), rgba(62, 133, 219, 0.55));
}

.tsd-bridge-chevron {
    flex-shrink: 0;
    width: 0;
    height: 0;
    margin-left: -1px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid rgba(62, 133, 219, 0.62);
}

.physiosteo .timeline-step-panel-inner .tech-stack-diagram {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1vh 0.6vw 0.8vh;
}

.physiosteo .tech-stack-diagram .tsd-board {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    padding: clamp(4px, 0.6vh, 8px) clamp(2px, 0.4vw, 6px);
}

.physiosteo .tech-stack-diagram .tsd-col-label {
    font-size: clamp(0.58rem, 0.72vw, 0.68rem);
}

.physiosteo .tech-stack-diagram .tsd-item-name {
    font-size: clamp(0.62rem, 0.76vw, 0.74rem);
}

.physiosteo .tech-stack-diagram .tsd-item-desc {
    font-size: clamp(0.54rem, 0.64vw, 0.62rem);
}

.physiosteo .tech-stack-diagram .tsd-col-panel,
.physiosteo .tech-stack-diagram .tsd-column--featured .tsd-col-panel,
.physiosteo .tech-stack-diagram .tsd-col-panel:hover,
.physiosteo .tech-stack-diagram .tsd-column--featured .tsd-col-panel:hover,
.physiosteo .tech-stack-diagram .tsd-col-header,
.physiosteo .tech-stack-diagram .tsd-item,
.physiosteo .tech-stack-diagram .tsd-item:hover,
.physiosteo .tech-stack-diagram .tsd-item--primary,
.physiosteo .tech-stack-diagram .tsd-bridge-node {
    box-shadow: none;
}

@media (max-width: 720px) {
    .tsd-board {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto;
        gap: 0;
        min-height: 0;
    }

    .tsd-col-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        color: rgba(226, 241, 255, 0.96);
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.24);
    }

    .tsd-col-icon svg {
        width: 68%;
        height: 68%;
    }

    .tsd-item-icon {
        width: 31px;
        height: 31px;
        border-radius: 8px;
        color: #3e85db;
        background: rgba(62, 133, 219, 0.18);
        border-color: rgba(62, 133, 219, 0.32);
    }

    .tsd-item-icon svg {
        width: 64%;
        height: 64%;
    }

    .tsd-board::before {
        display: none;
    }

    .tsd-column--featured .tsd-col-panel {
        transform: none;
    }

    .tsd-column--featured .tsd-col-panel:hover {
        transform: translateY(-2px);
    }

    .tsd-bridge {
        flex-direction: column;
        min-height: clamp(24px, 3vh, 32px);
        padding: 2px 0;
    }

    .tsd-bridge-line {
        width: 1px;
        height: clamp(12px, 2vh, 18px);
        min-width: 0;
        background: linear-gradient(180deg, rgba(62, 133, 219, 0.2), rgba(62, 133, 219, 0.55));
    }

    .tsd-bridge-chevron {
        margin-left: 0;
        margin-top: -1px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid rgba(62, 133, 219, 0.62);
        border-bottom: 0;
    }
}

.physiosteo .wireframe-paper .wf-img {
    height: calc(100% - 42px);
    max-height: calc(100% - 42px);
    width: auto;
    max-width: 45%;
    object-fit: contain;
    object-position: left top;
}

.physiosteo .timeline-step-panel .timeline-step-image {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
}

.physiosteo .timeline-step-panel .timeline-step-image img,
.physiosteo .timeline-step-panel .timeline-step-image video {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.physiosteo .timeline-step[data-step="5"] .timeline-step-panel-inner {
    align-items: stretch;
}

.physiosteo .timeline-step[data-step="5"] .timeline-step-image.physio-execution-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 24vh;
    flex: 1 1 auto;
}

.physiosteo .physio-execution-stack {
    position: relative;
    overflow: visible;
    padding-top: 48px;
    padding-right: 68px;
    box-sizing: border-box;
}

.physiosteo .physio-execution-card {
    grid-area: 1 / 1;
    position: relative;
    align-self: end;
    justify-self: start;
    height: calc(100% - 48px);
    margin: 0;
    padding: 0;
    border: none;
    background: #f6f7f9;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 14px rgba(48, 51, 59, 0.14);
    transition:
        transform 420ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 420ms cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform;
}

.physiosteo .physio-execution-card[data-slot="0"] {
    transform: translate(0, 0);
    z-index: 1;
}

.physiosteo .physio-execution-card[data-slot="1"] {
    transform: translate(4vw, -5vh);
    z-index: 2;
}

.physiosteo .physio-execution-card[data-slot="2"] {
    transform: translate(8vw, -10vh);
    z-index: 3;
    box-shadow: 0 8px 28px rgba(48, 51, 59, 0.22);
}

.physiosteo .physio-execution-card.is-animating-front {
    z-index: 10;
}

.physiosteo .physio-execution-card img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.physiosteo .timeline-step-panel-inner .discipline-spectrum {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    padding: 1.2vh 1.4vw 1vh;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(8px, 1.2vh, 12px) 0;
}

.physiosteo .discipline-spectrum::after {
    top: 32%;
    bottom: 30%;
    left: 10%;
    right: 10%;
}

.physiosteo .discipline-spectrum .ds-card {
    min-height: 0;
    padding: 1vh 1.2vw;
    gap: 1vw;
    grid-template-columns: minmax(92px, 128px) 1fr;
    border-radius: 10px;
}

.physiosteo .discipline-spectrum .ds-name {
    font-size: clamp(0.78rem, 1vw, 1rem);
    max-width: 140px;
    line-height: 1.05;
}

.physiosteo .discipline-spectrum .ds-priority,
.physiosteo .discipline-spectrum .ds-note {
    padding: 3px 10px;
    font-size: 0.62rem;
}

.physiosteo .discipline-spectrum .ds-bridge {
    height: 28px;
    width: min(72%, 360px);
    margin: 0;
}

.physiosteo .discipline-spectrum .ds-bridge span {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
}

.physiosteo .discipline-spectrum .ds-tags {
    gap: 5px 7px;
}

.physiosteo .discipline-spectrum .ds-tag {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 0.64rem;
    gap: 6px;
}

.physiosteo .discipline-spectrum .ds-tag-icon {
    width: 14px;
    height: 14px;
}

.physiosteo .discipline-spectrum .ds-card--womens .ds-tags,
.physiosteo .discipline-spectrum .ds-card--osteo .ds-tags {
    max-width: none;
}

.inv-outcome {
    position: relative;
    z-index: 3;
    width: min(82%, 760px);
    margin: clamp(12px, 1.5vh, 18px) 0 0 clamp(28px, 4.2vw, 58px);
    padding-left: 42px;
    font-size: clamp(0.82rem, 0.95vw, 1rem);
    line-height: 1.45;
    color: rgba(48, 51, 59, 0.52);
    white-space: normal;
    font-style: italic;
    flex-shrink: 0;
}

.inv-outcome::before {
    content: "*";
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: #6f84a2;
    background: #fff7ea;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 20px rgba(64, 84, 111, 0.16);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

/* -------------------------------------- DISCIPLINE SPECTRUM -------------------------------------- */

.discipline-spectrum {
    --ds-blue: #dbe8f8;
    --ds-blue-strong: #c8d8ee;
    --ds-ink: #071b35;
    --ds-muted: #667c9b;
    --ds-orange: #f09067;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: clamp(10px, 1.4vh, 16px) 0;
    padding: clamp(54px, 6.5vh, 76px) clamp(48px, 5vw, 76px) clamp(34px, 4vh, 48px);
    border-radius: 4px;
    overflow: visible;
    white-space: normal;
    isolation: isolate;
    background: transparent;
    border: 0;
    box-shadow: none;
}


.discipline-spectrum::after {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 35%;
    bottom: 33%;
    border: 2px dashed rgba(255, 255, 255, 0.88);
    border-radius: 26px;
    pointer-events: none;
    z-index: 0;
}

.ds-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    align-items: center;
    gap: clamp(18px, 3vw, 46px);
    min-height: clamp(128px, 17vh, 180px);
    padding: clamp(22px, 3vh, 34px) clamp(24px, 2.6vw, 34px);
    border-radius: 12px;
    transition:
        transform 320ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 320ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ds-card--womens:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 22px 38px rgba(41, 64, 92, 0.26);
}

.ds-card--osteo:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 22px 38px rgba(41, 64, 92, 0.28);
}

.ds-card--womens {
    align-self: end;
    color: var(--ds-ink);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(239, 246, 255, 0.42));
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 18px 34px rgba(41, 64, 92, 0.22);
    backdrop-filter: blur(10px);
}

.ds-card--osteo {
    align-self: start;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(56, 100, 151, 0.45), transparent 38%),
        linear-gradient(145deg, #06182f 0%, #0a213d 48%, #12314f 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ds-bridge {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    width: min(56%, 520px);
    height: 42px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(215, 226, 241, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 -1px 0 rgba(83, 106, 134, 0.18),
        0 10px 22px rgba(64, 84, 111, 0.18);
    transition:
        transform 260ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 260ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ds-bridge:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 -1px 0 rgba(83, 106, 134, 0.2),
        0 14px 26px rgba(64, 84, 111, 0.22);
}

.ds-bridge span {
    font-size: clamp(0.68rem, 0.9vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(83, 106, 134, 0.72);
}

.ds-label {
    position: relative;
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    justify-content: center;
}

.ds-priority,
.ds-note {
    width: fit-content;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: clamp(0.65rem, 0.78vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ds-priority {
    color: #5e789a;
    background: rgba(139, 161, 190, 0.22);
}

.ds-note {
    order: -1;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(144, 169, 199, 0.4);
}

.ds-name {
    font-size: clamp(1.1rem, 1.55vw, 1.68rem);
    font-weight: 700;
    color: currentColor;
    line-height: 1.03;
    white-space: normal;
    max-width: 230px;
}

.ds-discipline-icon {
    width: clamp(58px, 5.5vw, 74px);
    height: clamp(58px, 5.5vw, 74px);
    margin-top: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid currentColor;
    opacity: 0.62;
}

.ds-discipline-icon svg {
    width: 64%;
    height: 64%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-tags {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 20px);
    overflow: visible;
    align-content: center;
    align-items: center;
}

.ds-card--womens .ds-tags {
    max-width: 710px;
}

.ds-card--osteo .ds-tags {
    max-width: 690px;
}

.ds-tag {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: clamp(0.72rem, 0.92vw, 0.95rem);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.1;
    transition:
        transform 260ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 260ms cubic-bezier(0.33, 1, 0.68, 1),
        border-color 260ms ease,
        background 260ms ease;
}

.ds-card--womens .ds-tag:hover {
    transform: translateY(-2px);
    border-color: rgba(62, 133, 219, 0.42);
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        inset 0 -1px 0 rgba(83, 106, 134, 0.14),
        0 12px 20px rgba(64, 84, 111, 0.18);
}

.ds-card--osteo .ds-tag:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 20px rgba(41, 64, 92, 0.24);
}

.ds-card--womens .ds-tag {
    color: var(--ds-ink);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(130, 151, 181, 0.42);
    box-shadow:
        inset 0 -1px 0 rgba(83, 106, 134, 0.12),
        0 8px 14px rgba(64, 84, 111, 0.16);
}

.ds-card--osteo .ds-tag {
    color: rgba(255, 255, 255, 0.94);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ds-tag-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    opacity: 0.8;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ds-tag:hover .ds-tag-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.ds-tag-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none;
}

@media (min-width: 1441px) and (max-height: 1000px) {
    .discipline-spectrum {
        grid-template-rows: 1fr auto 1fr;
        gap: 12px 0;
        padding: 42px 60px 26px;
    }

    .ds-card {
        min-height: 0;
        padding: 24px 28px;
    }

    .ds-tags {
        gap: 9px 12px;
    }

    .ds-tag {
        min-height: 34px;
        padding: 7px 14px;
        font-size: 0.75rem;
    }

    .ds-tag-icon {
        width: 17px;
        height: 17px;
    }

    .ds-bridge {
        height: 40px;
        margin: 0;
    }
}

@media (max-width: 1440px), (max-height: 820px) {
    .discipline-spectrum {
        grid-template-rows: 1fr auto 1fr;
        gap: 10px 0;
        padding: 30px 44px 24px;
    }

    .ds-card {
        grid-template-columns: 158px 1fr;
        gap: 16px;
        min-height: 0;
        padding: 14px 18px;
        border-radius: 10px;
    }

    .ds-card--womens {
        height: 150px;
    }

    .ds-card--osteo {
        height: 132px;
    }

    .ds-label {
        gap: 5px;
    }

    .ds-priority,
    .ds-note {
        padding: 4px 11px;
        font-size: 0.62rem;
    }

    .ds-name {
        font-size: 1.05rem;
        max-width: 158px;
    }

    .ds-discipline-icon {
        width: 44px;
        height: 44px;
    }

    .ds-tags {
        gap: 6px 8px;
    }

    .ds-tag {
        min-height: 28px;
        gap: 7px;
        padding: 5px 10px;
        font-size: 0.62rem;
    }

    .ds-tag-icon {
        width: 15px;
        height: 15px;
    }

    .ds-bridge {
        height: 36px;
        margin: 0;
    }

    .ds-bridge span {
        font-size: 0.62rem;
        letter-spacing: 0.22em;
    }

    .inv-outcome {
        margin-top: 10px;
        font-size: 0.72rem;
    }
}

@media (max-width: 980px) {
    .discipline-spectrum {
        padding-inline: 36px;
    }

    .ds-card {
        grid-template-columns: 138px 1fr;
        padding-inline: 14px;
    }

    .ds-name {
        font-size: 0.95rem;
    }

    .ds-tag {
        padding-inline: 8px;
        font-size: 0.58rem;
    }

    .ds-tag-icon {
        width: 14px;
        height: 14px;
    }
}

/* -------------------------------------- END INVESTIGATION CARDS -------------------------------------- */

.project-data .workspace-about,
.anjana .project-data .workspace-about {
    height: 50%;
    margin: var(--project-margin);
    align-self: end;
    display: flex;
    justify-content: end;
    flex-direction: column;
    gap: 35px;
}

.anjana .project-data .workspace-details {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin: var(--project-margin);
    border-radius: 8px;
    min-width: 78vw;
}

.workspace-details-video {
    flex: 2;
    overflow: hidden;
    border-radius: 4px;
    padding: 14px 10px;
    background: #fff;
}

.workspace-details-video video {
    width: 100%;
    object-fit: contain;
}

.workspace-details-text {
    flex: 1;
    display: flex;
    gap: 2vw;
}

.line {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--project-detail-soft) 19%, transparent) 0%,
        color-mix(in srgb, var(--project-detail-soft) 53%, transparent) 50%,
        var(--project-detail-soft) 100%
    );
    border-radius: 9999px;
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
}

.line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--project-detail-soft);
    z-index: 1;
}

.separator {
    flex-shrink: 0;
    display: block;
    width: 1px;
    min-width: 1px;
    height: calc(80vh - 40px);
    margin: 10vh 5vw;
    align-self: center;
    background: var(--bg);
}

.project-data-about {
    display: flex;
    gap: 26px;
    align-items: baseline;
    position: relative;
    padding: 12px 3vw 12px 4px;
}

.anjana.expanded .workspace-about {
    min-width: 60vw;
    width: 60vw;
}

.vertical-line {
    width: 1px;
    background: var(--bg);
    height: 100%;
    margin: 16px 0;
    opacity: 1;
    transition: all 350ms ease-in-out;
}

.expanded .vertical-line {
    height: 0px;
    opacity: 0;
}

.workspace-wireframes {
    --wireframes-scroll-shift: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    gap: 1vw;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    transform-style: flat;
}

.workspace-wireframes-frame {
    position: relative;
    width: 20vw;
    min-width: 20vw;
    height: 100%;
    flex-shrink: 0;
    overflow: visible;
    contain: layout;
    transform-origin: center bottom;
    will-change: transform;
    transform-style: flat;
}

.workspace-wireframes-frame:not(:first-child) {
    margin-left: 0;
}

.workspace-wireframes-frame:nth-child(1) {
    transform: translateY(calc(-1 * var(--wireframes-scroll-shift)));
}

.workspace-wireframes-frame:nth-child(2) {
    z-index: 2;
    transform: translateY(var(--wireframes-scroll-shift));
}

.workspace-wireframes-frame:nth-child(3) {
    transform: translateY(calc(-1 * var(--wireframes-scroll-shift)));
}

.workspace-wireframes-frame img {
    position: absolute;
    left: 0;
    top: -12.5%;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 125%;
    object-fit: cover;
    object-position: center top;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    filter: opacity(0.25);
}

.workspace-filters {
    margin: var(--project-margin);
    display: flex;
    flex-wrap: wrap;
    min-width: 80vw;
    gap: 12px;
}

.workspace-filters-title {
    font-size: 20px;
    color: var(--text-high);
    flex: 9;
}

.workspace-filters-arrow {
    flex: 1;
}

.anjana .workspace-filters-arrow svg stop {
    stop-color: #BCCADC;
}

.workspace-filters-arrow svg {
    width: 22px;
    height: 25px;
}

.workspace-filters-content {
    min-width: 100%;
    min-height: 80%;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (min-width: 1441px) {
    .workspace-filters-content {
        height: 50vh;
    }
}

.workspace-filters-content-wrapper {
    cursor: pointer;
    display: grid;
}

.workspace-filters-content .filters-img {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: auto;
    transform-origin: center center;
    width: max(34vw, 80vh);
    user-select: none;
    -webkit-user-drag: none;
    outline: none;
}

.workspace-filters-content .filters-img:nth-child(1) {
    transform: rotate(0deg)
}

.workspace-filters-content .filters-img:nth-child(2) {
    transform: rotate(5deg)
}

.workspace-filters-content .filters-img:nth-child(3) {
    transform: rotate(-5deg)
}

.workspace-filters-content .filters-img:nth-child(4) {
    transform: rotate(10deg)
}

.workspace-filters-content .filters-img:nth-child(5) {
    transform: rotate(-10deg)
}

.workspace-filters-content .filters-img:nth-child(6) {
    transform: rotate(15deg)
}

.workspace-filters-content .filters-img:nth-child(7) {
    transform: rotate(-15deg)
}

.workspace-filters-content .filters-img:nth-child(8) {
    transform: rotate(20deg)
}

.workspace-filters-content .filters-img:nth-child(9) {
    transform: rotate(-20deg)
}

.workspace-filters-content .filters-img:nth-child(10) {
    transform: rotate(25deg)
}

.workspace-filters-content .filters-img:nth-child(11) {
    transform: rotate(-25deg)
}

.workspace-filters-content-wrapper.no-rotate {
    height: 40vh;
    padding-top: 10vh;
}

.workspace-filters-content-wrapper.no-rotate .filters-img {
    transform: rotate(0deg) !important;
    align-self: start !important;
    display: none;
}

div.filters-img img {
    width: 100%;
    height: 100%;
}

.workspace-filters-content-wrapper.no-rotate .visible {
    display: block;
    position: relative;
}

.workspace-filters-content-extra {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10px;
    color: var(--text-high);
}

@keyframes growLine {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes dropDot {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes showText {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.workspace-filters-content-extra.n-2.animate::before,
.workspace-filters-content-extra.n-4.animate::before,
.workspace-filters-content-extra.n-6.animate::before {
    animation: growLine 500ms ease-out forwards;
    animation-delay: 500ms;
}

.workspace-filters-content-extra.n-2.animate::after,
.workspace-filters-content-extra.n-4.animate::after,
.workspace-filters-content-extra.n-6.animate::after {
    animation: dropDot 250ms ease-out forwards;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
}

.workspace-filters-content-extra.n-2.animate,
.workspace-filters-content-extra.n-4.animate,
.workspace-filters-content-extra.n-6.animate {
    animation: showText 250ms ease-out forwards;
}

.workspace-filters-content-extra.n-2 {
    opacity: 0;
    transform: translateX(-20px);
    top: 217px;
    left: 176px;
    width: 340px;
    white-space: normal;
}

.workspace-filters-content-extra.n-2::before {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 0;
    width: 1px;
    height: 154px;
    background-color: var(--text-high);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
}

.workspace-filters-content-extra.n-2::after {
    content: '';
    position: absolute;
    left: -10px;
    bottom: 152px;
    width: 5px;
    height: 5px;
    background-color: var(--text-high);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-10px);
}

.workspace-filters-content-extra.n-4 {
    top: 106px;
    left: 351px;
    width: 340px;
    white-space: normal;
    opacity: 0;
    transform: translateX(-20px);
}

.workspace-filters-content-extra.n-4::before {
    content: '';
    width: 1px;
    height: 82px;
    background-color: var(--text-high);
    display: block;
    position: absolute;
    left: -8px;
    bottom: 0px;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
}

.workspace-filters-content-extra.n-4::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: var(--text-high);
    border-radius: 50%;
    position: absolute;
    left: -10px;
    bottom: 78px;
    opacity: 0;
    transform: translateY(-10px);
}

.workspace-filters-content-extra.n-6 {
    top: 138px;
    left: 383px;
    width: 228px;
    white-space: normal;
    opacity: 0;
    transform: translateX(-20px);
}

.workspace-filters-content-extra.n-6::before {
    content: '';
    width: 1px;
    height: 154px;
    background-color: var(--text-high);
    display: block;
    position: absolute;
    left: -8px;
    bottom: 0px;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
}

.workspace-filters-content-extra.n-6::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: var(--text-high);
    border-radius: 50%;
    position: absolute;
    left: -10px;
    bottom: 150px;
    opacity: 0;
    transform: translateY(-10px);
}

@media (min-width: 1441px) {
    .workspace-filters-content-extra {
        font-size: clamp(10px, 1.111vh, 14px);
    }

    .workspace-filters-content-extra.n-2 {
        top: 24.111vh;
        left: 19.556vh;
        width: 37.778vh;
    }

    .workspace-filters-content-extra.n-2::before {
        left: -0.889vh;
        height: 17.111vh;
    }

    .workspace-filters-content-extra.n-2::after {
        left: -1.111vh;
        bottom: 16.889vh;
        width: max(5px, 0.556vh);
        height: max(5px, 0.556vh);
    }

    .workspace-filters-content-extra.n-4 {
        top: 11.778vh;
        left: 39vh;
        width: 37.778vh;
    }

    .workspace-filters-content-extra.n-4::before {
        left: -0.889vh;
        height: 9.111vh;
    }

    .workspace-filters-content-extra.n-4::after {
        left: -1.111vh;
        bottom: 8.667vh;
        width: max(5px, 0.556vh);
        height: max(5px, 0.556vh);
    }

    .workspace-filters-content-extra.n-6 {
        top: 15.333vh;
        left: 42.556vh;
        width: 25.333vh;
    }

    .workspace-filters-content-extra.n-6::before {
        left: -0.889vh;
        height: 17.111vh;
    }

    .workspace-filters-content-extra.n-6::after {
        left: -1.111vh;
        bottom: 16.667vh;
        width: max(5px, 0.556vh);
        height: max(5px, 0.556vh);
    }
}

.workspace-filters-click {
    font-size: 12px;
    color: var(--project-detail-soft);
    flex: 9;
    text-align: right;
}

.workspace-filters-click-caption {
    display: none;
}



/* -------------------------------------- SOLUCIONES BRANDING (soluciones-filters) -------------------------------------- */

.soluciones-filters {
    margin: var(--project-margin);
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    width: 70vw;
    min-width: 70vw;
    height: auto;
    min-height: unset;
    align-self: center;
    box-sizing: border-box;
    overflow: visible;
    gap: 12px;
}

.soluciones-filters-title {
    font-size: 20px;
    color: var(--text-high);
    flex: 9;
}

/* Arrow gradient: same hue as panel bg, ~20% lighter (visible on #E89F79) */
.soluciones .soluciones-filters-arrow svg stop {
    stop-color: var(--soluciones-secondary-color);
}

.soluciones-filters-arrow {
    flex: 1;
}

.soluciones-filters-arrow svg {
    width: 22px;
    height: 25px;
}

.soluciones-filters-content {
    min-width: 100%;
    min-height: 0;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.soluciones-filters-stage {
    position: relative;
    width: min(52vw, 560px);
    margin: 0 auto;
    transform: none;
    transform-origin: center center;
    user-select: none;
    overflow: visible;
}

.soluciones-filters-guides {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 119%;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.soluciones-filters-guides.is-visible {
    opacity: 1;
    visibility: visible;
}

.soluciones-filters-guides-line {
    fill: none;
    stroke: var(--construction-guide-color);
    stroke-miterlimit: 10;
    stroke-width: var(--soluciones-guide-stroke, var(--construction-guide-stroke));
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.soluciones-filters-guides.is-animating .soluciones-filters-guides-line {
    animation: solucionesGuidesLineDraw 0.55s ease-out forwards;
}

.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(1) { animation-delay: 0ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(2) { animation-delay: 40ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(3) { animation-delay: 80ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(4) { animation-delay: 120ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(5) { animation-delay: 160ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(6) { animation-delay: 200ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(7) { animation-delay: 240ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(8) { animation-delay: 280ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(9) { animation-delay: 320ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(10) { animation-delay: 360ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(11) { animation-delay: 400ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(12) { animation-delay: 440ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(13) { animation-delay: 480ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(14) { animation-delay: 520ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(15) { animation-delay: 560ms; }
.soluciones-filters-guides.is-animating .soluciones-filters-guides-line:nth-child(16) { animation-delay: 600ms; }

@keyframes solucionesGuidesLineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.soluciones-filters-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
}

.soluciones-filters-logo-svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: blur(2.5px);
    transition: filter 0.85s ease-out;
    will-change: filter;
}

.soluciones-filters-logo:hover .soluciones-filters-logo-svg:not(.is-logo-revealed):not(.is-finale) {
    filter: blur(1.5px);
}

.soluciones-filters-logo-svg.is-logo-revealed {
    filter: blur(0);
}

.soluciones-filters-logo-rest {
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.soluciones-filters-logo-se {
    transition: transform 0.75s ease-out;
}

.soluciones-filters-logo-se .soluciones-filters-logo-fill {
    transition: fill 0.75s ease-out;
}

/* Finale: only S+E centered, white; wordmark + annotations hidden */
.soluciones-filters-logo-svg.is-finale .soluciones-filters-logo-rest {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.soluciones-filters-logo-svg.is-finale .soluciones-filters-logo-se {
    transform: translateX(76%);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.75s ease-out;
}

.soluciones-filters-logo-svg.is-finale .soluciones-filters-logo-se .soluciones-filters-logo-fill {
    fill: #fff;
    transition: fill 0.75s ease-out;
}

.soluciones-filters-annotations.is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.soluciones-filters-logo-fill {
    fill: #0c3153;
}

.soluciones-filters-annotations {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Dimension guides: baseline + end ticks under logo zones */
.soluciones-filters-dimension {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.soluciones-filters-dimension.is-visible {
    opacity: 1;
    visibility: visible;
}

/* S mark through first E (~0–90 in viewBox 158.22) */
.soluciones-filters-dimension--mark {
    left: 0;
    width: 221px;
    top: 142px;
}

/* EMPRESARIAS + SOLUCIONES letterforms (~78–158) */
.soluciones-filters-dimension--wordmark {
    left: 257px;
    width: 307px;
    top: 142px;
}

.soluciones-filters-dimension-measure {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 10px;
}

.soluciones-filters-dimension-tick {
    flex-shrink: 0;
    width: 1px;
    height: 8px;
    background-color: var(--project-detail-soft);
}

.soluciones-filters-dimension-baseline {
    flex: 1;
    height: 1px;
    margin-bottom: 0;
    background-color: var(--project-detail-soft);
}

.soluciones-filters-dimension-label {
    font-size: 10px;
    color: var(--project-detail-soft);
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

.soluciones-filters-callout {
    position: absolute;
    font-size: 10px;
    color: var(--text-high);
    width: max(140px, 18vw);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.soluciones-filters-callout.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.soluciones-filters-callout-text {
    display: block;
    line-height: 1.35;
    margin: 6px 0;
}

.soluciones-filters-callout.animate .soluciones-filters-callout-text {
    animation: showText 250ms ease-out forwards;
}

.soluciones-filters-callout::before {
    content: '';
    position: absolute;
    width: 1px;
    background-color: var(--text-high);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
}

.soluciones-filters-callout::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--text-high);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-10px);
}

.soluciones-filters-callout.animate::before {
    animation: growLine 500ms ease-out forwards;
    animation-delay: 200ms;
}

.soluciones-filters-callout.animate::after {
    animation: dropDot 250ms ease-out forwards;
    animation-delay: 100ms;
    animation-fill-mode: forwards;
}

.soluciones-filters-callout--empresa {
    left: 51px;
    top: 161px;
}

.soluciones-filters-callout--empresa::before {
    left: 0px;
    bottom: 100%;
    height: 40px;
    transform-origin: bottom;
}

.soluciones-filters-callout--empresa::after {
    left: -2px;
    top: -43px;
}

.soluciones-filters-callout--wordmark {
    left: 159px;
    bottom: 163px;
}

/* Text → line down → dot at end */
.soluciones-filters-callout--wordmark::before {
    left: 2px;
    top: 100%;
    bottom: auto;
    height: 40px;
    transform-origin: top;
}

.soluciones-filters-callout--wordmark::after {
    left: 0;
    top: calc(100% + 40px);
    bottom: auto;
}

.soluciones-filters-callout--wordmark.animate .soluciones-filters-callout-text {
    animation-delay: 0;
}

.soluciones-filters-callout--wordmark.animate::before {
    animation-delay: 250ms;
}

.soluciones-filters-callout--wordmark.animate::after {
    animation-delay: 750ms;
}

.soluciones-filters-click {
    font-size: 12px;
    color: var(--text-high);
    flex: 9;
    text-align: right;
}


.workspace-design-system,
.clinical-report-anatomy {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    min-width: 80vw;
    width: 80vw;
    /* Fit the visible shell, not the larger iOS 100vh unit. */
    height: min(74vh, calc(var(--app-height) - 48px));
    max-height: calc(var(--app-height) - 48px);
    margin: auto;
    overflow: hidden;
    min-height: 0;
}

.workspace-design-system-content-item,
.clinical-report-anatomy-content-item {
    box-sizing: border-box;
    border: 1px dashed #fff;
    border-radius: 8px;
    display: flex;
    align-self: stretch;
    justify-self: stretch;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.workspace-design-system-content-item-modal > img,
.workspace-design-system-content-item-states > img,
.workspace-design-system-content-item-switchs > img,
.workspace-design-system-content-item-measures > img,
.workspace-design-system-content-item-components > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    align-self: center;
}

.workspace-design-system-content-item-title,
.clinical-report-content-item-title {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    font-size: 20px;
    color: var(--text-high);
    display: flex;
    justify-content: center;
    align-items: center;
}

.workspace-design-system-content-item-explanation {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-wrap: auto;
    text-align: center;
    font-size: 12px;
    color: var(--text-high);
}

@media (min-width: 1441px) {
    .workspace-design-system-content-item-explanation {
        font-size: 22px;
    }

    .workspace-design-system-content-item-title,
    .clinical-report-content-item-title {
        font-size: 30px;
    }
}

.workspace-design-system-content-item-colors {
    grid-column: 4 / 6;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    font-size: 10px;
    justify-content: space-between;
}

.workspace-design-system-content-item-colors div {
    padding: 1vh 5px;
    display: flex;
    justify-content: space-between;
    color: var(--bg);
    border-radius: 4px;
}

.workspace-design-system-content-item-colors .dataset-color {
    background-color: #36699c;
}

.workspace-design-system-content-item-colors .field-color {
    background-color: #4AA8FF;
}

.workspace-design-system-content-item-colors .data-agreement-sharing-color {
    background-color: #54C991;
}

.workspace-design-system-content-item-colors .process-color {
    background-color: #FCC05F;
}

.workspace-design-system-content-item-colors .instance-color {
    background-color: #FC965F;
}

.workspace-design-system-content-item-colors .solution-color {
    background-color: #D35389;
}

.workspace-design-system-content-item-colors .term-color {
    background-color: #7956C3;
}

.workspace-design-system-content-item-colors .no-native-color {
    background-color: #666666;
}

.workspace-design-system-content-item-colors .relation-color {
    background-color: #77D2D8;
}

.workspace-design-system-content-item-icons {
    grid-column: 6 / 9;
    grid-row: 1 / 3;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workspace-design-system-content-item-icons-wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    justify-items: stretch;
    align-items: stretch;
    overflow: hidden;
}

.workspace-design-system-content-item-icons svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    justify-self: stretch;
    align-self: stretch;
}

.workspace-design-system-content-item-modal {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
    padding: 14px;
    display: flex;
    justify-content: center;
}

.workspace-design-system-content-item-states {
    grid-column: 1 / 4;
    grid-row: 5 / 6;
    padding: 0 14px;
}

.workspace-design-system-content-item-switchs {
    grid-column: 1 / 4;
    grid-row: 6 / 7;
    padding: 6px 14px;

}

.workspace-design-system-content-item-switchs img,
.workspace-design-system-content-item-states img {
    object-fit: contain;
    width: auto;
}

.workspace-design-system-content-item-buttons {
    grid-column: 4 / 7;
    grid-row: 4 / 7;
    padding: 20px;
    align-items: center;
    justify-content: center;
    /* Clip only after the scale shell has the fitted footprint. */
    overflow: hidden;
}

.workspace-design-system-content-item-buttons-scale {
    --ds-buttons-scale: 1;
    --ds-buttons-natural-w: 0px;
    --ds-buttons-natural-h: 0px;
    position: relative;
    width: calc(var(--ds-buttons-natural-w) * var(--ds-buttons-scale));
    height: calc(var(--ds-buttons-natural-h) * var(--ds-buttons-scale));
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 1;
    overflow: hidden;
}

.workspace-design-system-content-item-buttons-wrapper {
    --ds-button-cols: 4;
    --ds-buttons-scale: 1;
    display: grid;
    grid-template-columns: repeat(var(--ds-button-cols), max-content);
    gap: 8px clamp(6px, 1.6vw, 28px);
    justify-content: center;
    align-content: center;
    align-items: center;
    /* Keep the natural matrix size; scale via the shell so nothing is clipped first. */
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    height: max-content;
    max-width: none;
    max-height: none;
    overflow: visible;
    transform: scale(var(--ds-buttons-scale));
    transform-origin: top left;
}

.workspace-design-system-content-item-buttons-wrapper > .is-ds-col-hidden {
    display: none;
}

.workspace-design-system-content-item-measures {
    grid-column: 6 / 7;
    grid-row: 3 / 4;
    justify-content: center;
    align-items: center;
    padding: 16px 16px 20px 20px;
}

.workspace-design-system-content-item-components {
    grid-column: 7 / 9;
    grid-row: 3 / 7;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.workspace-design-system-content-item-components > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* When a board column cannot fit the short viewport, hide it whole and reflow. */
.workspace-design-system-content-item.is-ds-panel-hidden {
    display: none;
}

.workspace-design-system.has-hidden-components .workspace-design-system-content-item-icons {
    grid-column: 6 / 9;
}

.workspace-design-system.has-hidden-components .workspace-design-system-content-item-buttons {
    grid-column: 4 / 9;
}

.workspace-design-system.has-hidden-components .workspace-design-system-content-item-measures {
    grid-column: 6 / 9;
}

.workspace-design-system.has-hidden-side-column .workspace-design-system-content-item-colors {
    grid-column: 4 / 9;
}

.workspace-design-system.has-hidden-side-column .workspace-design-system-content-item-buttons {
    grid-column: 4 / 9;
}

/* -------------------------------------- OUTRO -------------------------------------- */

#email {
    cursor: pointer;
}

.tooltip {
    position: relative;
    color: var(--text-high);
}

/* -------------------------------------- OMNIA SALUD PROJECT -------------------------------------- */

.anjana .project-data,
.physiosteo .project-data,
.omnia .project-data,
.soluciones .project-data,
.ayunando .project-data,
.others .project-data {
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
}

.anjana.expanded .project-data > div,
.omnia.expanded .project-data > div,
.soluciones.expanded .project-data > div,
.ayunando.expanded .project-data > div,
.others.expanded .project-data > div {
    display: flex;
    flex-direction: column;
}

.physiosteo.expanded .project-data > .project-data-intro {
    min-width: unset;
    display: flex;
    flex-direction: column;
}

.physiosteo.expanded .project-data {
    overflow-y: hidden;
    overflow-x: auto;
    align-items: stretch;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.physiosteo.expanded .project-data > .project-timeline {
    flex: 0 0 auto;
    max-height: none;
    align-self: center;
    left: -400px;
    z-index: -1;
}

.project-data-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    max-height: 60vh;
    max-width: 35vw;
    min-width: 30vw;
    margin: auto 8vw auto 16vw;
    flex-shrink: 0;
    white-space: normal;
    overflow: hidden;
}

.project-data-title-pre {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--project-detail-soft);
    opacity: 1;
    display: block;
}

.project-data-intro-title {
    font-size: clamp(44px, 4.8vw, 72px);
    line-height: 1.1;
    margin: 0;
    padding: 0;
    color: var(--text-high);
    text-align: left;
    white-space: normal;
    font-size: 20px;
}

.project-data-intro > p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--project-detail-soft);
    opacity: 1;
    margin: 0;
    white-space: normal;
}

.project-data-title-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-data-title-tags-tag {
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--project-detail-soft) 60%, transparent);
    color: var(--project-detail-soft);
    white-space: nowrap;
    line-height: 1.4;
}

/* -------------------------------------- PERFORMANCE RESULT -------------------------------------- */

.project-data > .performance-result {
    width: 80vw;
    height: 100%;
    min-height: 80vh;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(40px, 6vh, 72px);
    padding: 10vh 6vw;
    margin: auto;
    margin-right: 50vw;
    color: var(--bg);
    font-family: var(--font-body);
    flex-shrink: 0;
    box-sizing: border-box;
    white-space: normal;
}

.project-data > .performance-result .performance-result-summary {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    text-wrap: balance;
    max-width: 46vw;
    line-height: 1.45;
    margin: 0;
    color: var(--project-detail-soft);
}

.project-data > .performance-result .performance-result-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 68vw;
    overflow: visible;
}

.project-data > .performance-result .performance-result-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(16px, 3vw, 40px);
    position: relative;
    gap: 14px;
    min-width: 0;
    overflow: visible;
}

.project-data > .performance-result .performance-result-stat + .performance-result-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5%;
    height: 90%;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 45%, transparent) 0,
        color-mix(in srgb, var(--bg) 45%, transparent) 4px,
        transparent 4px,
        transparent 9px
    );
}

.project-data > .performance-result .performance-result-stat-value {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bg);
}

.project-data > .performance-result .performance-result-stat-label {
    font-size: 12px;
    line-height: 1.35;
    min-height: calc(2em * 1.35);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 14vw;
    opacity: 1;
    text-align: center;
    color: var(--project-detail-soft);
}

/* omnia-process flow panel */
.omnia-process {
    position: relative;
    flex-shrink: 0;
    min-width: 90vw;
    align-self: stretch;
    overflow: visible;
    box-sizing: border-box;
    z-index: 2;
}

.omnia-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    z-index: 1;
}

.omnia-ghost-label {
    position: absolute;
    transform: translateX(-12px);
    font-size: 100px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-high);
    opacity: 0.06;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

.omnia-ghost-label.high {
    top: 70px;
}

.omnia-ghost-label.high-left {
    right: 270px;
}

.omnia-ghost-label.high-right {
    left: 286px;
}

.omnia-ghost-label.middle {
    top: 100px;
}

.omnia-ghost-label.middle:first-child {
    right: 302px;
}

.omnia-ghost-label.middle:last-child {
    left: 316px;
}


.omnia-ghost-label.low {
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 1;
}

.omnia-wireframes {
    top: 6%;
    left: 3%;
}

.omnia-hifi {
    top: 50%;
    left: 32%;
    transform: translate(-50%, -50%);
    align-items: center;
}

.omnia-mockup {
    bottom: 6%;
    right: 29%;
    align-items: flex-end;
    isolation: isolate;
}

.omnia-mockup .omnia-frame-stack {
    position: relative;
    z-index: 2;
}

.omnia-mockup .omnia-frame-stack .omnia-frame-video,
.omnia-mockup .omnia-frame-stack .omnia-frame-video:hover {
    transform: none;
    transition: none;
    z-index: 2;
}

/* horizontal overlapping stack */
.omnia-frame-stack {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.omnia-frame-stack .omnia-frame {
    position: relative;
    transition: transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 340ms ease;
    cursor: default;
    transform-origin: center;
}

.omnia-frame-stack .omnia-frame:not(:first-child) {
    margin-left: -35px;
}

/* arc arrangement for 4 frames: outer lower, inner higher */
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(1) { transform: translateY(24px)  rotate(-2.5deg); }
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(2) { transform: translateY(4px)   rotate(-0.8deg); }
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(3) { transform: translateY(4px)   rotate(0.8deg);  }
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(4) { transform: translateY(24px)  rotate(2.5deg);  }

/* hover: preserve each frame's own rotation */
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(1):hover { transform: scale(1.18) translateY(24px)  rotate(-2.5deg); z-index: 10; }
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(2):hover { transform: scale(1.18) translateY(4px)   rotate(-0.8deg); z-index: 10; }
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(3):hover { transform: scale(1.18) translateY(4px)   rotate(0.8deg);  z-index: 10; }
.omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(4):hover { transform: scale(1.18) translateY(24px)  rotate(2.5deg);  z-index: 10; }

/* hifi frames: 25% larger with border-radius */
.omnia-hifi .omnia-frame {
    width: 130px;
    height: auto;
    border-radius: 14px;
}

/* arc arrangement for 3 frames: outer lower, center at top */
.omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(1) { transform: translateY(20px)  rotate(-2deg);  }
.omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(2) { transform: translateY(0px)   rotate(0deg);   }
.omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(3) { transform: translateY(20px)  rotate(2deg);   }

/* hover: preserve rotation */
.omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(1):hover { transform: scale(1.18) translateY(20px)  rotate(-2deg);  z-index: 10; }
.omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(2):hover { transform: scale(1.18) translateY(0px)   rotate(0deg);   z-index: 10; }
.omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(3):hover { transform: scale(1.18) translateY(20px)  rotate(2deg);   z-index: 10; }

.omnia-frame {
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
}

@media (min-width: 1441px) {
    .omnia-wireframes .omnia-frame {
        width: 125px;
    }

    .omnia-hifi .omnia-frame {
        width: 162.5px;
    }

    .omnia-wireframes .omnia-frame-stack .omnia-frame:not(:first-child),
    .omnia-hifi .omnia-frame-stack .omnia-frame:not(:first-child) {
        margin-left: -43.75px;
    }
}

.omnia-frame-video {
    width: 150px;
    height: auto;
    border-radius: 12px;
    padding-bottom: 33px;
}

.omnia-frame-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    pointer-events: none;
}

.omnia-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    pointer-events: none;
}

/* Desktop: keep wireframes at the top, then balance Hi-Fi against a larger result column. */
@media (min-width: 1181px) {
    .omnia-hifi {
        top: 75%;
        left: 15%;
    }

    .omnia-mockup {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 65%;
        align-items: center;
        transform: translate(-50%, -50%);
        height: 65%;
    }

    .omnia-mockup .omnia-frame-stack {
        justify-content: center;
        height: 100%;
    }

    .omnia-mockup .omnia-frame-video {
        width: auto;
        height: 100%;
        padding-bottom: 0;
    }

    .omnia-mockup .omnia-frame-video video {
        width: auto;
        height: 100%;
        object-fit: contain;
    }
}


/* -------------------------------------- CLINICAL REPORT ANATOMY SECTION -------------------------------------- */

.clinical-report-pdf {
    width: 100%;
    border-radius: 4px;
}

.clinical-report-anatomy .clinical-report-anatomy-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 16px 12px;
    border: 1px dashed #fff;
    border-radius: 8px;
}

.clinical-report-anatomy .clinical-report-pdf {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 4px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
}

.clinical-report-anatomy-content-item.item-01 .clinical-report-pdf,
.clinical-report-anatomy-content-item.item-04 .clinical-report-pdf {
    background-size: 100% auto;
    background-position: center top;
}

.clinical-report-anatomy-content-item.item-03 .clinical-report-pdf {
    filter: grayscale(1);
}

.clinical-report-anatomy-content-item.item-02 .clinical-report-pdf {
    filter: none;
    display: flex;
    align-items: start;
    justify-content: start;
}

.clinical-report-anatomy-content-item.item-02 .clinical-report-pdf img {
    width: 100%;
    object-fit: contain;
    border-radius: inherit;
    filter: drop-shadow(10px 2px 18px rgba(6, 26, 51, 0.24));
}

.clinical-report-anatomy .clinical-report-pdf video {
    width: 100%;
    object-fit: contain;
    border-radius: inherit;
    display: block;
}

.clinical-report-anatomy-content-item.item-01 {
    grid-column: 4 / 6;
    grid-row: 1 / 3;
}

.clinical-report-anatomy-content-item.item-02 {
    grid-column: 6 / 9;
    grid-row: 1 / 7;
}

.clinical-report-anatomy-content-item.item-03 {
    grid-column: 1 / 3;
    grid-row: 3 / 7;
}

.clinical-report-anatomy-content-item.item-04 {
    grid-column: 3 / 6;
    grid-row: 3 / 7;
}

/* -------------------------------------- SCREEN DUAL VIEW SECTION -------------------------------------- */

.screen-dual-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 82%;
}

.screen-dual-view-title {
    font-size: 20px;
    color: var(--text-high);
    text-align: center;
}

.screen-dual-view-container {
    position: relative;
    width: 80vw;
    flex: 1;
    overflow: hidden;
}

.screen-desktop {
    display: block;
    width: 80%;
    max-width: 80%;
    height: auto;
    border-radius: 8px;
    margin-left: 10%;
    filter: opacity(0.8);
}

.screen-zoom {
    position: absolute;
    border-radius: 4px;
    background: #fff !important;
    height: 194px;
    width: auto;
    padding: 10px;
}

.screen-draggable {
    --screen-shadow-color: rgb(74 74 74 / 40%);
    --screen-shadow-left-color: var(--screen-shadow-color);
    --screen-shadow-right-color: var(--screen-shadow-color);
    --screen-shadow-top-color: var(--screen-shadow-color);
    --screen-shadow-bottom-color: var(--screen-shadow-color);
    box-shadow:
        -10px 0 26px -16px var(--screen-shadow-left-color),
        10px 0 26px -16px var(--screen-shadow-right-color),
        0 -10px 26px -16px var(--screen-shadow-top-color),
        0 10px 26px -16px var(--screen-shadow-bottom-color);
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    transition: box-shadow 150ms ease;
}

.screen-draggable:active,
.screen-draggable.is-dragging {
    --screen-shadow-color: rgb(74 74 74 / 48%);
    cursor: grabbing;
}

.screen-draggable.is-at-left {
    --screen-shadow-left-color: transparent;
}

.screen-draggable.is-at-right {
    --screen-shadow-right-color: transparent;
}

.screen-draggable.is-at-top {
    --screen-shadow-top-color: transparent;
}

.screen-draggable.is-at-bottom {
    --screen-shadow-bottom-color: transparent;
}

.screen-zoom-left {
    top: 13%;
    left: 0;
}

.screen-zoom-right {
    bottom: 8%;
    right: 0;
}

@media (min-width: 1441px) {
    .screen-dual-view-container {
        isolation: isolate;
    }

    .screen-dual-view-container .screen-desktop {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: left top;
        z-index: 0;
    }

    .screen-dual-view-container .screen-zoom {
        z-index: 2;
    }
}

/* -------------------------------------- END OMNIA SALUD PROJECT -------------------------------------- */

.email-text::after {
    content: attr(data-tooltip);
    display: inline-flex;
    align-items: center;
    background: var(--text-alternative);
    color: var(--bg);
    padding: 4px 8px;
    font-size: 10px;
    line-height: 1;
    border-radius: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.350s ease-in-out;
    margin-left: 10px;
    transform: translateY(-0.5px);
    vertical-align: middle;
}

.email-text:hover::after {
    opacity: 1;
}

.email-text.executed::after {
    padding: 4px 20px;
}

.tooltip .email-text {
    position: relative;
    text-align: left;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
}

/* -------------------------------------- OTHERS PROJECTS -------------------------------------- */

.others-project {
    width: 80vw;
    min-width: 80vw;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin: var(--project-margin);
    box-sizing: border-box;
}

.work.others.expanded .project-data > .others-project:last-of-type {
    margin-right: 50vw;
}

.others-project-gallery {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56vh;
    min-height: 300px;
}

.others-project-gallery-main {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: relative;
    z-index: 3;
    overflow: hidden;
    flex-shrink: 0;
}

.others-project-gallery-main:has(video),
.others-project-gallery-main:has(img) {
    background: none;
    border: none;
}

.others-project-gallery-main video,
.others-project-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
    pointer-events: none;
}

.others-project-gallery-mock {
    position: absolute;
    border-radius: 6px;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bg) 55%, transparent);
    z-index: 1;
    overflow: hidden;
}

.others-project-gallery-mock--sketch {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        color-mix(in srgb, var(--project-accent) 6%, var(--bg)) 4px,
        color-mix(in srgb, var(--project-accent) 6%, var(--bg)) 5px
    );
}

.others-project-gallery-mock--image {
    background: none;
    border: none;
    overflow: hidden;
}

.others-project-gallery-mock--image img,
.others-project-gallery-mock--image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    pointer-events: none;
}

.others-project-gallery-main--multicem {
    width: 82%;
    margin: 0 auto;
}

.others-project-gallery-main--multicem img {
    filter: grayscale(1) opacity(0.5);
}

.others-project-gallery-main--lineup-video {
    height: 100%;
    width: 71%;
}

.others-project-gallery-main--lineup-video video {
    object-fit: contain;
}

.others-project-gallery-main--grupom img {
    object-fit: cover;
    object-position: left center;
}
.others-project-gallery-main--grupom video,
.others-project-gallery-main--multicem img,
.others-project-gallery-main--multicem video {
    object-fit: cover;
}

/* line-up: left above, right below */
.others-project--lineup .others-project-gallery-mock--left {
    right: 40px;
    bottom: 70px;
    width: 341px;
    height: auto;
}

.others-project--lineup .others-project-gallery-mock--left img {
    padding: 12px;
}

.others-project--lineup .others-project-gallery-mock--right {
    right: 140px;
    top: 70px;
    width: 290px;
    height: 270px;
    padding: 0;
    background: none;
    border: none;
    z-index: 1;
}

.others-project--lineup .others-project-gallery-mock--right .ayunando-details-item.item-04 {
    width: 100%;
    height: 100%;
    padding: 0;
    gap: 0;
    border: none;
    --ayunando-inner-radius: 4px;
}

.others-project--lineup .others-project-gallery-mock--right .ayunando-details-browser-chrome {
    min-height: 22px;
    padding: 6px 10px;
}

.others-project--lineup .others-project-gallery-mock--right .ayunando-details-browser-title {
    font-size: 8px;
}

.others-project--lineup .others-project-gallery-mock--right .ayunando-details-browser-code {
    padding: 10px;
    font-size: 9px;
    line-height: 1.55;
}

@media (min-width: 1600px) {
    .others-project--lineup .others-project-gallery {
        --lineup-side-column-left: calc(71% + clamp(32px, 2vw, 40px));
        --lineup-side-column-edge: clamp(18px, calc(12.22vh - 92px), 40px);
    }

    .others-project--lineup .others-project-gallery-mock--left {
        right: auto;
        bottom: var(--lineup-side-column-edge);
        left: var(--lineup-side-column-left);
        width: clamp(341px, 20.4vw, 392px);
    }

    .others-project--lineup .others-project-gallery-mock--right {
        right: auto;
        top: var(--lineup-side-column-edge);
        left: var(--lineup-side-column-left);
        width: clamp(290px, 16.667vw, 320px);
        height: clamp(270px, 15.52vw, 298px);
    }
}

.grupom-logo-animation svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grupom-logo-animation .grupom-logo-base {
    fill: #262626;
    transform-box: fill-box;
    transform-origin: center;
    animation: grupomLogoBaseIn 7s cubic-bezier(.7, 0, .2, 1) infinite;
}

.grupom-logo-animation .grupom-logo-write-mask {
    transform-box: fill-box;
    transform-origin: top center;
    animation-duration: 7s;
    animation-timing-function: cubic-bezier(.68, 0, .18, 1);
    animation-iteration-count: infinite;
}

.grupom-logo-animation .grupom-logo-write-mask-g {
    animation-name: grupomLogoWriteLetterG;
}

.grupom-logo-animation .grupom-logo-write-mask-r {
    animation-name: grupomLogoWriteLetterR;
}

.grupom-logo-animation .grupom-logo-write-mask-u {
    animation-name: grupomLogoWriteLetterU;
}

.grupom-logo-animation .grupom-logo-write-mask-p {
    animation-name: grupomLogoWriteLetterP;
}

.grupom-logo-animation .grupom-logo-write-mask-o {
    animation-name: grupomLogoWriteLetterO;
}

.grupom-logo-animation .grupom-logo-word {
    fill: #ffffff;
    opacity: 0;
    animation: grupomLogoGrupoHold 7s ease-in-out infinite;
}

.grupom-logo-animation .grupom-logo-build-mask {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: grupomLogoBuildReveal 7s cubic-bezier(.72, 0, .17, 1) infinite;
}

.grupom-logo-animation .grupom-logo-piece {
    fill: #ffffff;
    transform-box: fill-box;
    transform-origin: bottom;
    animation: grupomLogoPieceSettle 7s cubic-bezier(.72, 0, .17, 1) infinite;
}

.grupom-logo-animation .grupom-logo-piece-1 { animation-delay: 0s; }
.grupom-logo-animation .grupom-logo-piece-2 { animation-delay: .12s; }
.grupom-logo-animation .grupom-logo-piece-3 { animation-delay: .22s; }
.grupom-logo-animation .grupom-logo-piece-4 { animation-delay: .32s; }

.grupom-logo-animation .grupom-logo-cyan-line {
    stroke: var(--construction-guide-color);
    stroke-width: var(--construction-guide-stroke);
    stroke-linecap: square;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: grupomLogoBlueprintDraw 7s ease-in-out infinite;
}

.grupom-logo-animation .grupom-logo-cyan-line-thin {
    opacity: 0;
}

.grupom-logo-animation .grupom-logo-space-box,
.grupom-logo-animation .grupom-logo-space-line {
    fill: none;
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
}

.grupom-logo-animation .grupom-logo-line-v { animation-delay: .05s; }
.grupom-logo-animation .grupom-logo-line-h { animation-delay: .18s; }
.grupom-logo-animation .grupom-logo-line-accent { animation-delay: .32s; }

@keyframes grupomLogoBaseIn {
    0% {
        opacity: 0;
        transform: scale(.94);
    }
    8%, 88% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(.985);
    }
}

@keyframes grupomLogoWriteLetterG {
    0%, 8% {
        transform: scaleY(0);
    }
    17%, 88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

@keyframes grupomLogoWriteLetterR {
    0%, 12% {
        transform: scaleY(0);
    }
    21%, 88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

@keyframes grupomLogoWriteLetterU {
    0%, 16% {
        transform: scaleY(0);
    }
    25%, 88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

@keyframes grupomLogoWriteLetterP {
    0%, 20% {
        transform: scaleY(0);
    }
    29%, 88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

@keyframes grupomLogoWriteLetterO {
    0%, 24% {
        transform: scaleY(0);
    }
    33%, 88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

@keyframes grupomLogoGrupoHold {
    0%, 6% {
        opacity: 0;
    }
    12%, 88% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes grupomLogoBuildReveal {
    0%, 30% {
        transform: scaleY(0);
    }
    62%, 88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

@keyframes grupomLogoPieceSettle {
    0%, 30% {
        opacity: 0;
        transform: translateY(42px);
    }
    42% {
        opacity: 1;
    }
    64%, 88% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px);
    }
}

@keyframes grupomLogoBlueprintDraw {
    0%, 62% {
        opacity: 0;
        stroke-dashoffset: 620;
    }
    74%, 88% {
        opacity: .92;
        stroke-dashoffset: 0;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: -620;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grupom-logo-animation .grupom-logo-base,
    .grupom-logo-animation .grupom-logo-word,
    .grupom-logo-animation .grupom-logo-build-mask,
    .grupom-logo-animation .grupom-logo-piece,
    .grupom-logo-animation .grupom-logo-cyan-line {
        animation: none;
    }

    .grupom-logo-animation .grupom-logo-base,
    .grupom-logo-animation .grupom-logo-write-mask,
    .grupom-logo-animation .grupom-logo-word,
    .grupom-logo-animation .grupom-logo-piece,
    .grupom-logo-animation .grupom-logo-cyan-line {
        opacity: 1;
    }

    .grupom-logo-animation .grupom-logo-write-mask {
        transform: scaleY(1);
    }

    .grupom-logo-animation .grupom-logo-cyan-line {
        stroke-dashoffset: 0;
    }
}

/* others brand layouts: sketch square slightly offset behind the logo */
.others-project--multicem .others-project-gallery-mock--left {
    left: auto;
    right: 0;
    top: 54px;
    width: 310px;
    height: 267px;
}

.others-project--grupom .others-project-gallery-mock--left {
    left: auto;
    right: 0;
    top: 66px;
    width: 310px;
    height: 313px;
}

.others-project--grupom .grupom-gallery-extra {
    left: 0;
    bottom: 0;
    width: 9vw;
    height: 100%;
    z-index: 0;
    box-shadow: none;
}

.others-project--grupom .grupom-gallery-extra img {
    object-fit: cover;
    object-position: left center;
    filter: invert(1) opacity(0.2);
    margin-top: 22vh;
}

.others-project--grupom .others-project-gallery-mock--right,
.others-project--multicem .others-project-gallery-mock--right {
    right: 20px;
    left: auto;
    top: 50px;
    width: 310px;
    height: auto;
    padding: 48px;
    background: var(--white);
    overflow: hidden;
}

.others-project-gallery-main--grupom {
    width: 82%;
    margin: 0 auto;
}

.grupom-logo-animation {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.others-project--multicem .others-project-gallery-mock--colors {
    left: 0;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    height: 55%;
    padding: 8px;
    gap: 0;
    align-items: stretch;
    background: none;
    border: 1px dashed #fff;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 10px;
    color: inherit;
}

@media (min-width: 1441px) {
    .others-project--multicem .others-project-gallery-mock--colors {
        width: 420px;
    }
}

.others-project--multicem .others-project-gallery-mock--colors .ayunando-details-colors {
    gap: 4px;
}

.multicem-details-color-base {
    background-color: #C2C6C9;
    color: #2D2D2D;
}

.multicem-details-color-main {
    background-color: #367167;
    color: #FFFFFF;
}

.multicem-details-color-secondary {
    background-color: #2D2D2D;
    color: #C2C6C9;
}

.multicem-details-color-accent {
    background-color: #FFFFFF;
    color: #2D2D2D;
    border: 1px solid color-mix(in srgb, #2D2D2D 12%, transparent);
    box-sizing: border-box;
}

.multicem-logo-animation {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.multicem-logo-animation svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.multicem-logo-guides-line {
    fill: none;
    stroke: var(--construction-guide-color);
    stroke-miterlimit: 10;
    stroke-width: var(--construction-guide-stroke);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

.others-project-details {
    display: flex;
    gap: 2vw;
    width: 100%;
}

.others-project-details .project-data-about {
    flex: 1;
}

.work.others .project-info,
.work.others .project-info .project-date,
.work.others .project-info .project-name {
    color: var(--bg);
}

.work.others .project-data-intro > p,
.work.others .project-data-title-pre {
    color: var(--project-detail-soft);
    opacity: 1;
}

.work.others .project-data-intro-title {
    color: var(--bg);
    opacity: 1;
}

.work.others .project-data-title-pre {
    opacity: 1;
}

.work.others .project-data-intro > p {
    opacity: 1;
}

.work.others .project-data-title-tags-tag {
    color: var(--project-detail-soft);
    border-color: color-mix(in srgb, var(--project-detail-soft) 60%, transparent);
}

.work.others .others-project-details .project-data-about-title,
.work.others .others-project-details .project-data-about-text {
    color: var(--project-detail-soft);
}

.work.others .others-project-details .line {
    background: color-mix(in srgb, var(--project-detail-soft) 55%, transparent);
}

.work.others .others-project-details .line::before {
    background: var(--project-detail-soft);
}

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

@media (max-width: 1180px) {
    :root {
        --responsive-page-pad: clamp(16px, 4vw, 32px);
        --responsive-section-gap: clamp(36px, 7vw, 72px);
        --font-size-intro: clamp(1.75rem, 5.8vw, 3.35rem);
        --project-margin: 0;
    }

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: block;
    }

    body {
        min-height: 100vh;
    }

    .logo-overlay {
        display: none;
    }

    #horizontalWrapper {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding: var(--responsive-page-pad);
    }

    .track {
        display: flex;
        flex-direction: column;
        gap: var(--responsive-section-gap);
        width: 100% !important;
        height: auto;
        white-space: normal;
        transform: none !important;
        will-change: auto;
    }

    .intro,
    .outro {
        width: 100%;
        min-width: 0;
        min-height: min(72vh, 720px);
        max-height: none;
        padding: 0;
    }

    .intro-logo {
        left: 0;
    }

    .text-up p,
    .text-bottom p {
        font-size: var(--font-size-intro);
        line-height: 1.16;
    }

    .text-up p:nth-child(2),
    .text-bottom p:nth-child(1) {
        width: min(82%, 720px);
        margin-left: auto;
    }

    .works {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
        min-width: 0;
        flex-shrink: 1;
        align-items: stretch;
    }

    .works.expand {
        gap: 16px;
    }

    .works .work,
    .works .work:nth-child(1),
    .works .work:nth-child(2),
    .works .work:nth-child(3),
    .works .work:nth-child(4),
    .works .work:nth-child(5),
    .works .work:nth-child(6) {
        width: 100%;
        min-width: 0;
    }

    .work {
        min-height: clamp(320px, 42vh, 520px);
        border-radius: 8px;
        cursor: pointer;
        flex-direction: column;
        justify-content: flex-start;
        box-shadow: inset 22px 0 50px 15px rgba(0, 0, 0, 0.04);
        transition: min-height 350ms ease, filter 250ms ease, background 750ms ease-out;
    }

    .work.expanded {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .project-info {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 72px;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 18px;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        z-index: 3;
    }

    .expanded .project-info {
        width: 100%;
        padding: 18px;
    }

    .project-info span {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .work.soluciones.expanded .project-info .project-name {
        max-width: 12ch;
        line-height: 1.25;
        text-align: right;
        white-space: normal;
    }

    .work.soluciones:not(.expanded) .project-info .project-name {
        max-width: none;
        white-space: nowrap;
    }

    .vertical-line {
        display: none;
    }

    .work-logo {
        visibility: visible;
        top: 82px;
        right: 18px;
        width: 38px;
        height: 38px;
        opacity: 0.55;
    }

    .close-button,
    .work-navigation {
        position: sticky;
        bottom: 16px;
        align-self: flex-end;
        margin-right: 16px;
    }

    .close-button {
        right: 16px;
        opacity: 0;
        pointer-events: none;
    }

    .work.expanded .close-button {
        opacity: 1;
        pointer-events: auto;
    }

    .work-navigation {
        right: auto;
        margin-bottom: -46px;
        opacity: 0;
        pointer-events: none;
    }

    .work.expanded .work-navigation {
        opacity: 1;
        pointer-events: auto;
    }

    .project-data {
        width: 100%;
        height: auto;
        display: none;
        flex: none;
        overflow: visible;
        transition: none;
    }

    .expanded .project-data,
    .physiosteo.expanded .project-data {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--responsive-section-gap);
        width: 100%;
        height: auto;
        max-height: none;
        padding: 0 18px 72px;
        overflow: visible;
        white-space: normal;
        box-sizing: border-box;
    }

    .expanded .project-data > div,
    .expanded .project-data > section,
    .expanded .project-data > span,
    .physiosteo.expanded .project-data > .project-timeline {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        flex-shrink: 1;
        align-self: stretch;
    }

    .shadow,
    .expanded .shadow,
    .expanded .shadow::before,
    .separator {
        display: none;
    }

    .project-data-intro,
    .soluciones-showcase .project-data-intro,
    .ayunando-showcase .project-data-intro,
    .physiosteo.expanded .project-data > .project-data-intro {
        max-width: min(100%, 720px);
        min-width: 0;
        max-height: none;
        margin: 24px 0 0;
        gap: 16px;
        overflow: visible;
    }

    .project-data-intro-title {
        font-size: clamp(1.7rem, 5vw, 3.25rem);
        line-height: 1.05;
    }

    .project-data-intro > p {
        max-width: 62ch;
        font-size: clamp(0.92rem, 1.8vw, 1.05rem);
    }

    .project-data-title-tags {
        display: none;
    }

    .project-data-title-tags-tag {
        font-size: 0.62rem;
        white-space: normal;
    }

    .project-data-about {
        flex-direction: column;
        gap: 8px;
        padding: 14px 0 0;
    }

    .project-data-about-title,
    .project-data-about-text {
        width: 100%;
        flex: none;
        font-size: clamp(0.86rem, 1.8vw, 1rem);
    }

    .line {
        position: relative;
        top: auto;
        margin-bottom: 8px;
    }

    .project-data > .performance-result {
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: clamp(32px, 7vw, 64px) 0;
        padding-bottom: 50vh;
        gap: 28px;
    }

    .project-data > .performance-result .performance-result-summary {
        max-width: 62ch;
        font-size: clamp(1rem, 2.4vw, 1.35rem);
    }

    .project-data > .performance-result .performance-result-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        max-width: 100%;
    }

    .project-data > .performance-result .performance-result-stat {
        min-height: 132px;
        padding: 20px;
        border: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
    }

    .project-data > .performance-result .performance-result-stat + .performance-result-stat::before {
        display: none;
    }

    .project-data > .performance-result .performance-result-stat-label {
        max-width: fit-content;
        color: var(--bg);
        font-weight: 700;
    }

    .project-data > .performance-result .performance-result-summary {
        display: none;
    }

    .project-data > .performance-result .performance-result-stat-value {
        font-size: clamp(2rem, 7vw, 3.5rem);
    }

    .workspace-hero,
    .physio-hero-panel {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 11;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }

    .anjana .workspace-hero {
        min-height: 242px;
        height: 242px;
        aspect-ratio: auto;
        overflow: hidden;
    }

    .work.anjana.expanded .project-data > .workspace-hero {
        min-height: 242px;
        height: 242px;
    }

    .workspace-hero > img,
    .physio-hero > img {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    .anjana .workspace-hero > img {
        height: 100%;
    }

    .workspace-wireframes {
        position: absolute;
        inset: auto 0 0;
        height: 38%;
        justify-content: flex-end;
        gap: 8px;
        opacity: 0.45;
    }

    .workspace-wireframes-frame {
        width: 24%;
        min-width: 24%;
    }

    .workspace-details,
    .anjana .project-data .workspace-details {
        gap: 20px;
        min-width: 0;
    }

    .workspace-details-video {
        padding: 8px;
    }

    .workspace-details-text,
    .others-project-details {
        flex-direction: column;
        gap: 14px;
    }

    .workspace-filters,
    .soluciones-filters {
        min-width: 0;
        width: 100%;
        min-height: 0;
        height: auto;
        gap: 12px;
    }

    .workspace-filters-arrow,
    .soluciones-filters-arrow {
        display: none;
    }

    .workspace-filters-title,
    .soluciones-filters-title {
        flex: 1 0 100%;
    }

    .workspace-filters-content,
    .soluciones-filters-content {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: 8px;
    }

    .workspace-filters-content .filters-img {
        width: min(92vw, 720px);
        max-width: 100%;
    }

    .workspace-filters-content-wrapper.no-rotate {
        height: 100%;
        padding-top: 0;
        align-items: center;
    }

    .workspace-filters-content-extra,
    .workspace-filters-content-extra.n-2,
    .workspace-filters-content-extra.n-4,
    .workspace-filters-content-extra.n-6 {
        left: 18px;
        top: auto;
        bottom: 18px;
        width: calc(100% - 36px);
        padding: 10px 12px;
        background: color-mix(in srgb, var(--bg) 84%, transparent);
        border-radius: 6px;
        transform: none;
    }

    .workspace-filters-content-extra::before,
    .workspace-filters-content-extra::after {
        display: none;
    }

    .workspace-design-system,
    .clinical-report-anatomy,
    .ayunando-details {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(180px, auto);
        gap: 12px;
    }

    .workspace-design-system {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(56px, auto));
        grid-auto-rows: unset;
        gap: 8px;
        height: auto;
        min-height: 0;
        margin: 0;
        overflow: hidden;
    }

    .clinical-report-anatomy .clinical-report-anatomy-content-item,
    .clinical-report-anatomy-content-item.item-01,
    .clinical-report-anatomy-content-item.item-02,
    .clinical-report-anatomy-content-item.item-03,
    .clinical-report-anatomy-content-item.item-04,
    .ayunando-details-title,
    .ayunando-details-content,
    .ayunando-details-item,
    .ayunando-details-item.item-01,
    .ayunando-details-item.item-02,
    .ayunando-details-item.item-03,
    .ayunando-details-item.item-04,
    .ayunando-details-item.item-05 {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
    }

    .workspace-design-system-content-item {
        min-width: 0;
    }

    .clinical-report-anatomy-content-item-title,
    .ayunando-details-title,
    .ayunando-details-content {
        grid-column: 1 / -1;
    }

    .soluciones-showcase,
    .ayunando-showcase {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 0;
    }

    .soluciones.expanded .project-data > .soluciones-showcase {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        min-height: 0;
        padding-right: 0;
    }

    .soluciones-showcase .project-data-intro {
        margin: 24px 0 0;
        width: 100%;
    }

    .soluciones-line-bg {
        display: none;
    }

    .soluciones-showcase .soluciones-hero {
        width: 100%;
        max-width: 100%;
    }

    .soluciones-showcase .soluciones-hero video {
        width: 100%;
        transform: none;
        object-position: center center;
    }

    .ayunando-mockup {
        width: 100%;
        height: auto;
        min-height: 0;
        padding-top: 20vh;
    }

    .ayunando-mockup-stage {
        width: min(64vw, 360px);
        height: auto;
        min-height: 0;
        aspect-ratio: var(--ayunando-hero-ratio);
        max-width: 100%;
        justify-content: center;
    }

    .ayunando-hero {
        width: 100%;
        height: 100%;
    }

    .ayunando-animation--1,
    .ayunando-animation--2 {
        right: auto;
        width: clamp(96px, 24vw, 168px);
    }

    .ayunando-animation--1 {
        left: 52%;
        top: 18%;
    }

    .ayunando-animation--2 {
        left: 56%;
        top: 48%;
    }

    .ayunando-schedule {
        width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        padding-top: 20px;
    }

    .ayunando-process-timeline {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
    }

    .ayunando-process-timeline-inner {
        transform: none;
    }

    .ayunando-process-timeline-rail {
        inset: 0;
    }

    .ayunando-process-timeline-rail-track {
        height: 100%;
        width: 100%;
    }

    .ayunando-process-timeline-rail-segment {
        left: var(--ayunando-rail-x, 10px);
        top: var(--ayunando-rail-y, 0);
        width: 1px;
        height: var(--ayunando-rail-length, 0);
        transform: scaleY(0);
        transform-origin: top center;
    }

    .ayunando-process-timeline-rail-segment.is-visible {
        transform: scaleY(1);
    }

    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-rail-segment {
        transform: scaleY(0);
    }

    .ayunando-process-timeline.is-ready.is-playing:not(.is-complete) .ayunando-process-timeline-rail-segment.is-visible {
        transform: scaleY(1);
    }

    .ayunando-process-timeline.is-playing .ayunando-process-timeline-rail-segment.is-visible {
        transition: transform 0.39s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .ayunando-process-timeline.is-ready:not(.is-complete) .ayunando-process-timeline-step-title {
        transform: translateY(-0.55em);
    }

    .ayunando-process-timeline.is-playing .ayunando-process-timeline-step-title.is-visible {
        transform: translateY(0);
    }

    .ayunando-process-timeline-steps {
        flex-direction: column;
        gap: 18px;
    }

    .ayunando-process-timeline-step {
        display: grid;
        grid-template-columns: 20px minmax(92px, 0.28fr) 1fr;
        align-items: start;
        text-align: left;
        gap: 12px;
    }

    .ayunando-process-timeline-step-marker {
        display: contents;
    }

    .ayunando-process-timeline-step-dot {
        grid-column: 1;
        margin-top: 4px;
    }

    .ayunando-process-timeline-step-title {
        position: static;
        grid-column: 2;
        font-size: 11px;
        color: #2D2D2D;
        transform: none;
        transform-origin: initial;
        white-space: normal;
    }

    .ayunando-process-timeline-step-copy {
        grid-column: 3;
        max-width: none;
        padding: 0;
    }

    .physio-hero-bg,
    .physio-hero-bg-01,
    .physio-hero-bg-02 {
        display: none;
    }

    .physio-hero {
        width: 100%;
        min-height: 80svh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .physio-hero > img {
        display: none;
    }

    .physio-hero-mobile-video {
        display: block;
        width: 65%;
        height: 80svh;
        min-height: 80svh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: none;
        background: transparent;
        mix-blend-mode: multiply;
    }

    .physiosteo .project-data .project-timeline,
    .physiosteo.expanded .project-data > .project-timeline {
        position: relative;
        left: auto;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    .physio-timeline-connector {
        display: none;
    }

    .physiosteo .project-timeline .timeline-step,
    .physiosteo .project-timeline .timeline-step[data-step="1"],
    .physiosteo .project-timeline .timeline-step[data-step="2"],
    .physiosteo .project-timeline .timeline-step[data-step="3"],
    .physiosteo .project-timeline .timeline-step[data-step="4"],
    .physiosteo .project-timeline .timeline-step[data-step="5"],
    .physiosteo .project-timeline .timeline-step[data-expanded] {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow: visible;
        pointer-events: auto;
    }

    .physiosteo .project-timeline .timeline-step-header {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 14px 0;
        border-top: 1px solid color-mix(in srgb, var(--bg) 38%, transparent);
        transform: none;
    }

    .physiosteo .timeline-step-header .timeline-step-title,
    .physiosteo .project-timeline[data-has-expanded] .timeline-step:not([data-expanded]) .timeline-step-title,
    .physiosteo .project-timeline .timeline-step[data-expanded] .timeline-step-title {
        display: block;
        width: 100%;
        flex: 1 1 auto;
        font-size: clamp(1.25rem, 3.6vw, 2rem) !important;
        color: var(--text-high);
        opacity: 0.9;
        white-space: normal;
    }

    .physiosteo .project-timeline .timeline-step-header:hover .timeline-step-title,
    .physiosteo .project-timeline .timeline-step-header:focus-visible .timeline-step-title {
        color: var(--text-high);
        opacity: 0.9;
    }

    .physiosteo .project-timeline .timeline-step-panel,
    .physiosteo .project-timeline .timeline-step-panel[data-open],
    .physiosteo .project-timeline .timeline-step-panel[data-opening] {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        opacity: 1;
        overflow: hidden;
    }

    .physiosteo .project-timeline .timeline-step-panel-inner,
    .physiosteo .project-timeline .timeline-step-panel[data-open] .timeline-step-panel-inner {
        max-height: none;
        display: flex;
        gap: 16px;
    }

    .omnia-process {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        min-width: 0;
        width: 100%;
        min-height: 340px;
    }

    .omnia-group {
        position: relative;
        inset: auto;
        transform: none;
        align-items: center;
        justify-content: center;
    }

    .omnia-ghost-label {
        font-size: clamp(3rem, 10vw, 6.25rem);
    }

    .omnia-frame-stack {
        justify-content: center;
        max-width: 100%;
    }

    .screen-dual-view,
    .screen-dual-view-container {
        width: 100%;
        height: auto;
        min-height: 360px;
    }

    .screen-desktop {
        width: 100%;
        margin-left: 0;
    }

    .screen-zoom {
        width: min(45%, 260px);
        height: auto;
    }

    .others-project {
        width: 100%;
        min-width: 0;
        margin: 0;
        gap: 22px;
    }

    .work.others.expanded .project-data > .others-project:last-of-type {
        margin-right: 0;
    }

    .others-project-gallery {
        position: relative;
        height: min(82vh, 680px);
        min-height: 420px;
        display: block;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        overflow: visible;
    }

    .others-project-gallery-main,
    .others-project-gallery-main--lineup-video,
    .others-project-gallery-main--multicem,
    .others-project-gallery-main--grupom {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: auto;
        min-height: 220px;
        margin: 0;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .others-project-gallery-main video,
    .others-project-gallery-main img {
        height: auto;
        max-height: 56vh;
    }

    .others-project-gallery-mock,
    .others-project--lineup .others-project-gallery-mock--left,
    .others-project--lineup .others-project-gallery-mock--right,
    .others-project--grupom .others-project-gallery-mock--left,
    .others-project--grupom .others-project-gallery-mock--right,
    .others-project--grupom .grupom-gallery-extra,
    .others-project--multicem .others-project-gallery-mock--left,
    .others-project--multicem .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--colors {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 160px;
        padding: 16px;
        z-index: 1;
        box-shadow: none;
    }

    .others-project .others-project-gallery-mock {
        position: absolute;
        padding: 0;
        z-index: 1;
    }

    .others-project--lineup .others-project-gallery-main--lineup-video {
        width: 94%;
    }

    .others-project--lineup .others-project-gallery-mock--left {
        top: 0;
        left: 50%;
        width: 82%;
        min-height: 0;
        transform: translateX(-50%);
    }

    .others-project--lineup .others-project-gallery-mock--right {
        right: auto;
        bottom: 0;
        left: 50%;
        top: auto;
        width: 74%;
        min-height: 0;
        transform: translateX(-50%);
    }

    .others-project--grupom .grupom-gallery-extra {
        top: 0;
        left: 0;
        width: 26%;
        height: 100%;
    }

    .others-project--grupom .others-project-gallery-mock--left,
    .others-project--multicem .others-project-gallery-mock--left {
        top: 0;
        left: 50%;
        width: 78%;
        min-height: 0;
        transform: translateX(-50%);
    }

    .others-project--grupom .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--colors {
        right: auto;
        bottom: 0;
        left: 50%;
        top: auto;
        width: 74%;
        min-height: 0;
        transform: translateX(-50%);
    }

    .others-project--grupom .grupom-gallery-extra img {
        margin-top: 0;
    }
}

@media (min-width: 721px) and (max-width: 1180px) {
    :root {
        --responsive-page-pad: clamp(24px, 3.25vw, 40px);
        --responsive-section-gap: clamp(44px, 5.5vw, 68px);
        --font-size-intro: clamp(2.15rem, 4.65vw, 3.6rem);
    }

    .intro,
    .outro {
        min-height: clamp(560px, 68svh, 720px);
    }

    .intro-logo {
        top: 54%;
    }

    .works,
    .works.expand {
        gap: clamp(12px, 1.5vw, 18px);
    }

    .work {
        min-height: clamp(260px, 34vw, 390px);
    }

    .project-info,
    .expanded .project-info {
        min-height: 80px;
        padding: 20px;
        font-size: clamp(10px, 1.05vw, 12px);
    }

    .work-logo {
        top: 92px;
        right: 20px;
        width: 42px;
        height: 42px;
    }

    .expanded .project-data,
    .physiosteo.expanded .project-data {
        gap: var(--responsive-section-gap);
        padding: 0 clamp(20px, 3vw, 34px) 104px;
    }

    .project-data-intro,
    .soluciones-showcase .project-data-intro,
    .ayunando-showcase .project-data-intro,
    .physiosteo.expanded .project-data > .project-data-intro {
        max-width: min(88%, 820px);
        margin-top: clamp(24px, 4vw, 44px);
    }

    .project-data-intro-title {
        font-size: clamp(2.1rem, 4.5vw, 3.6rem);
    }

    .project-data-intro > p {
        font-size: clamp(0.98rem, 1.45vw, 1.12rem);
        line-height: 1.5;
    }

    .project-data-about,
    .workspace-details-text,
    .others-project-details {
        display: grid;
        grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
        column-gap: clamp(24px, 4vw, 52px);
        row-gap: 10px;
        align-items: start;
    }

    .project-data-about-title,
    .project-data-about-text {
        width: auto;
    }

    .anjana .workspace-hero,
    .work.anjana.expanded .project-data > .workspace-hero {
        height: auto;
        min-height: clamp(300px, 44vw, 500px);
        aspect-ratio: 16 / 10;
    }

    .workspace-filters-content,
    .soluciones-filters-content {
        aspect-ratio: 16 / 9;
    }

    .project-data > .performance-result {
        padding-block: clamp(64px, 9vw, 112px);
    }

    .close-button,
    .work-navigation,
    .work.expanded .close-button,
    .work.expanded .work-navigation {
        position: fixed;
        right: max(18px, calc((100vw - 1100px) / 2));
        margin: 0;
        z-index: 120;
    }

    .work.expanded .close-button {
        bottom: 20px;
    }

    .work.expanded .work-navigation {
        right: max(62px, calc((100vw - 1012px) / 2));
        bottom: 20px;
        flex-direction: row;
        gap: 8px;
    }

    .work.expanded .backward-button,
    .work.expanded .forward-button,
    .work.expanded .close-button {
        box-shadow: 0 6px 18px rgb(0 0 0 / 16%);
    }

    .physio-hero {
        min-height: clamp(560px, 72svh, 760px);
    }

    .physio-hero-mobile-video {
        width: min(54%, 470px);
        height: clamp(540px, 70svh, 740px);
        min-height: 0;
    }

    .workspace-filters-arrow,
    .soluciones-filters-arrow {
        display: block;
        flex: 1;
    }

    .workspace-filters-title,
    .soluciones-filters-title,
    .workspace-filters-click,
    .soluciones-filters-click {
        flex: 9;
    }
}

@media (max-width: 720px) {
    :root {
        --responsive-page-pad: 16px;
        --responsive-section-gap: 0;
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-page-pad-top: calc(var(--responsive-page-pad) + var(--mobile-safe-top));
        --mobile-page-pad-bottom: calc(var(--responsive-page-pad) + var(--mobile-safe-bottom));
        --mobile-safe-viewport-height: calc(100svh - var(--mobile-page-pad-top) - var(--mobile-page-pad-bottom));
        --mobile-logo-height: 30.6px;
        --mobile-project-gap: 8px;
        --mobile-project-overlap: 10px;
        --mobile-sticky-top-gap: 28px;
        --mobile-project-top-offset: calc(var(--responsive-page-pad) + var(--mobile-logo-height) + var(--mobile-sticky-top-gap));
        --mobile-floating-controls-right: 6px;
    }

    html,
    body {
        min-height: 100svh;
        background: var(--bg);
    }

    body.is-mobile-project-locked {
        position: fixed;
        right: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        touch-action: none;
    }

    body.is-mobile-project-locked .project-data {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    #horizontalWrapper {
        min-height: 100svh;
        padding: var(--mobile-page-pad-top) var(--responsive-page-pad) var(--mobile-page-pad-bottom);
        background: var(--bg);
    }

    .track {
        gap: 0;
    }

    .intro,
    .outro {
        min-height: calc(var(--mobile-safe-viewport-height) * 0.5);
    }

    .intro {
        justify-content: flex-start;
        gap: 28px;
        padding-bottom: 28px;
    }

    .outro {
        height: calc(var(--mobile-safe-viewport-height) * 0.51);
        min-height: calc(var(--mobile-safe-viewport-height) * 0.51);
        max-height: none;
        justify-content: flex-end;
        padding-top: 0;
        padding-bottom: 26px;
        overflow: visible;
    }

    .email-text::after {
        display: none;
    }

    .tooltip .email-text {
        cursor: auto;
    }

    .intro-logo {
        position: absolute;
        top: 0;
        right: auto;
        left: 0;
        transform: scale(0.6);
        transform-origin: top left;
    }

    .intro .text-up {
        margin-top: calc(var(--mobile-logo-height) + 12px);
        width: 95%;
    }

    .intro .text-up .about {
        overflow: hidden;
    }

    .intro .text-up .about > span {
        --intro-mobile-reveal-delay: 160ms;
        display: inline-block;
        opacity: 0;
        transform: translateY(-8px);
        clip-path: inset(0 0 100% 0);
        animation: introMobileTextReveal 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--intro-mobile-reveal-delay) forwards;
        will-change: opacity, transform, clip-path;
    }

    .intro .text-up .about:first-child > span:nth-child(1) {
        --intro-mobile-reveal-delay: 160ms;
    }

    .intro .text-up .about:first-child > span:nth-child(2) {
        --intro-mobile-reveal-delay: 420ms;
    }

    .intro .text-up .about:nth-child(2) > span {
        --intro-mobile-reveal-delay: 680ms;
    }

    @keyframes introMobileTextReveal {
        from {
            opacity: 0;
            transform: translateY(-8px);
            clip-path: inset(0 0 100% 0);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            clip-path: inset(0 0 0 0);
        }
    }

    .about img {
        height: 36.6px;
        width: auto;
    }

    .ini,
    .ini svg {
        width: 28px;
        height: 51px;
    }

    .ini svg {
        fill: var(--text-low);
    }

    .text-up p,
    .text-bottom p {
        font-size: 18px;
    }

    .text-bottom {
        align-self: stretch;
        text-align: left;
    }

    .text-up p:nth-child(2),
    .text-bottom p:nth-child(1) {
        width: 100%;
        margin-left: 0;
    }

    .works {
        position: sticky;
        top: calc(var(--mobile-page-pad-top) + var(--mobile-sticky-top-gap));
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        justify-content: center;
        gap: 0;
        height: calc((var(--mobile-safe-viewport-height) * 0.52) - var(--mobile-sticky-top-gap));
        min-height: calc((var(--mobile-safe-viewport-height) * 0.52) - var(--mobile-sticky-top-gap));
        padding-top: 0;
        padding-bottom: 0;
    }

    .works.expand {
        position: relative;
        top: auto;
        gap: var(--mobile-project-gap);
        height: var(--mobile-safe-viewport-height);
        min-height: var(--mobile-safe-viewport-height);
        padding-top: 0;
    }

    .works .work,
    .works .work:nth-child(1),
    .works .work:nth-child(2),
    .works .work:nth-child(3),
    .works .work:nth-child(4),
    .works .work:nth-child(5),
    .works .work:nth-child(6) {
        width: 100%;
        min-height: 0;
        scroll-margin-top: var(--mobile-project-top-offset);
    }

    .works:not(.expand) .work + .work {
        margin-top: calc(var(--mobile-project-overlap) * -1);
    }

    .works:not(.expand) .work:not(:last-child) {
        box-shadow: 0 6px 10px -9px rgba(48, 51, 59, 0.32);
    }

    .works:not(.expand) .work:last-child {
        box-shadow: none;
    }

    .works .work:nth-child(1) {
        height: clamp(72px, 13vh, 108px);
        z-index: 6;
    }

    .works .work:nth-child(2) {
        height: clamp(62px, 11vh, 92px);
        z-index: 5;
    }

    .works .work:nth-child(3) {
        height: clamp(54px, 9.5vh, 78px);
        z-index: 4;
    }

    .works .work:nth-child(4) {
        height: clamp(48px, 8.2vh, 66px);
        z-index: 3;
    }

    .works .work:nth-child(5) {
        height: clamp(42px, 7vh, 56px);
        z-index: 2;
    }

    .works .work:nth-child(6) {
        height: clamp(38px, 6vh, 48px);
        z-index: 1;
    }

    .work:not(.expanded) .project-info {
        min-height: 100%;
        padding: calc(10px + var(--mobile-project-overlap)) 12px 10px;
        align-items: center;
    }

    .work:not(.expanded) .work-logo {
        display: none;
    }

    .works.expand .work:not(.expanded) {
        display: none;
    }

    .work.expanded {
        height: var(--mobile-safe-viewport-height) !important;
        min-height: var(--mobile-safe-viewport-height);
        overflow: hidden;
        scroll-margin-top: var(--mobile-page-pad-top);
    }

    .expanded .project-data,
    .physiosteo.expanded .project-data {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        padding: 0 14px 70px;
        gap: 38px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .work.expanded .work-logo {
        top: 68px;
        right: 14px;
        width: 32px;
        height: 32px;
        transform: none;
    }

    .work.expanded .close-button {
        position: fixed;
        right: var(--mobile-floating-controls-right);
        bottom: var(--mobile-page-pad-bottom);
        margin: 0;
        z-index: 120;
    }

    .work.expanded .work-navigation {
        position: fixed;
        right: var(--mobile-floating-controls-right);
        bottom: calc(var(--mobile-page-pad-bottom) + 42px);
        flex-direction: column;
        gap: 8px;
        align-self: auto;
        margin-bottom: 0;
        margin-right: 0;
        z-index: 120;
    }

    .work.expanded .backward-button,
    .work.expanded .forward-button,
    .work.expanded .close-button {
        border: 1px solid var(--text-high);
        box-shadow: 0 4px 12px rgb(0 0 0 / 14%);
        padding: 0;
        transform: none;
    }

    .backward-button svg,
    .forward-button svg {
        display: block;
        transform: rotate(90deg);
        transform-origin: center;
    }

    .project-info {
        position: relative;
        min-height: 64px;
        padding: 14px;
        align-items: center;
        font-size: 10px;
        background: var(--project-accent);
        z-index: 90;
    }

    .work.expanded .project-info {
        cursor: pointer;
    }

    .work.expanded .project-info::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 24px;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--project-accent) 72%, black 28%) 0%,
            color-mix(in srgb, var(--project-accent) 30%, transparent) 68%,
            transparent 100%
        );
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        transition:
            opacity 260ms ease,
            transform 260ms ease;
    }

    .work.expanded.has-project-scroll .project-info::after {
        opacity: 1;
        transform: translateY(96%);
    }

    .work.expanded .work-logo {
        top: 21px;
        right: auto;
        left: 50%;
        width: 22px;
        height: 22px;
        opacity: 1;
        transform: translateX(-50%);
        filter: brightness(0) invert(1);
        z-index: 95;
    }

    .work.expanded .work-logo svg,
    .work.expanded .work-logo svg * {
        fill: var(--bg);
    }

    .work.expanded .work-logo img {
        filter: brightness(0) invert(1);
    }

    .work.expanded .project-data > div,
    .work.expanded .project-data > section,
    .work.expanded .project-data > span {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        max-height: none;
        position: relative;
        border-radius: 2px;
    }

    .work.expanded .project-data > .separator {
        display: block;
        width: 100%;
        min-width: 0;
        height: 1px;
        min-height: 1px;
        margin: 7vh 0;
        align-self: stretch;
        background: color-mix(in srgb, var(--bg) 48%, transparent);
    }

    .work.expanded .project-data > .project-data-intro {
        margin-top: 24px;
    }

    .work.expanded .project-data > .soluciones-filters {
        margin: 10vh 0;
    }

    .project-data-intro-title {
        font-size: 22px;
        line-height: 1.08;
    }

    .project-data-intro > p {
        font-size: 12px;
        line-height: 1.45;
        opacity: 1;
    }

    .project-data-title-tags-tag {
        font-size: 8px;
        opacity: 0.5;
    }

    .project-data > .performance-result .performance-result-stats,
    .clinical-report-anatomy,
    .ayunando-details,
    .omnia-process {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-design-system {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(48px, auto));
        height: auto;
        min-height: 0;
        gap: 6px;
        overflow: hidden;
    }

    .workspace-design-system-content-item-icons {
        padding: 10px;
    }

    .workspace-design-system-content-item-icons-wrapper {
        gap: 4px;
    }

    .workspace-design-system-content-item-colors {
        font-size: 8px;
        padding: 6px;
    }

    .workspace-design-system-content-item-colors div {
        padding: 4px 5px;
    }

    .workspace-design-system-content-item-explanation {
        font-size: 10px;
        padding: 10px;
    }

    .workspace-design-system-content-item-title {
        font-size: 14px;
    }

    .workspace-design-system-content-item-buttons {
        padding: 10px;
    }

    .workspace-design-system-content-item-buttons-scale {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        overflow: visible;
    }

    .workspace-design-system-content-item-buttons-wrapper {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        transform: none;
        gap: 6px 8px;
    }

    .work.ayunando.expanded .project-data > .ayunando-details {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        grid-auto-rows: unset;
        gap: 6px;
        height: clamp(430px, 74svh, 560px);
        min-height: 430px;
        max-height: 560px;
        margin: 0;
        overflow: hidden;
    }

    .ayunando-details > * {
        min-height: 0;
    }

    .ayunando-details-title {
        grid-column: 1 / 9;
        grid-row: 1 / 2;
        font-size: 14px;
        line-height: 1.1;
        text-align: center;
        padding: 6px;
    }

    .ayunando-details-content {
        grid-column: 1 / 9;
        grid-row: 2 / 3;
        padding: 10px;
        font-size: 8px;
        line-height: 1.3;
        overflow: hidden;
    }

    .ayunando-details-item {
        min-width: 0;
        min-height: 0;
        gap: 8px;
        padding: 8px;
        border-radius: 8px;
    }

    .ayunando-details-item.item-01 {
        grid-column: 1 / 5;
        grid-row: 3 / 4;
        padding: 6px;
    }

    .ayunando-details-item.item-02 {
        grid-column: 4 / 9;
        grid-row: 4 / 7;
        padding: 0;
        gap: 0;
    }

    .ayunando-details-item.item-03 {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
        padding: 0;
        gap: 0;
    }

    .ayunando-details-item.item-04 {
        grid-column: 5 / 9;
        grid-row: 3 / 4;
        padding: 8px;
        gap: 0;
    }

    .ayunando-details-item.item-05 {
        grid-column: 1 / 4;
        grid-row: 5 / 7;
        padding: 8px;
        gap: 0;
    }

    .ayunando-details-colors {
        gap: 4px;
        font-size: 8px;
    }

    .ayunando-details-color {
        padding: 7px 5px;
    }

    .ayunando-details-browser-chrome {
        min-height: 22px;
        padding: 6px 8px;
    }

    .ayunando-details-browser-controls {
        left: 7px;
        gap: 4px;
    }

    .ayunando-details-browser-dot {
        width: 5px;
        height: 5px;
    }

    .ayunando-details-browser-title {
        font-size: 8px;
    }

    .ayunando-details-browser-code {
        padding: 8px;
        font-size: 7px;
        line-height: 1.55;
    }

    .ayunando-details-browser-comment {
        display: none;
    }

    .ayunando-details-usage {
        gap: 6px;
    }

    .ayunando-details-usage-header {
        gap: 5px;
    }

    .ayunando-details-usage-tabs,
    .ayunando-details-usage-filters {
        gap: 3px;
    }

    .ayunando-details-usage-tab,
    .ayunando-details-usage-filter {
        padding: 3px 5px;
        font-size: 6px;
    }

    .ayunando-details-usage-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .ayunando-details-usage-stat {
        padding: 5px;
    }

    .ayunando-details-usage-stat-label {
        font-size: 6px;
    }

    .ayunando-details-usage-stat-value {
        font-size: 10px;
    }

    .ayunando-details-usage-stat:nth-last-of-type(-n + 2),
    .ayunando-details-usage-heatmap,
    .ayunando-details-usage-footer {
        display: none;
    }

    .workspace-hero,
    .physio-hero-panel {
        aspect-ratio: auto;
        min-height: 260px;
    }

    .anjana .workspace-hero > img {
        border-radius: 2px;
    }

    .workspace-wireframes {
        display: none;
    }

    .workspace-filters-content,
    .soluciones-filters-content {
        aspect-ratio: 4 / 3;
    }

    .workspace-filters-content {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        overflow: visible;
        border-radius: 8px;
    }

    .anjana .project-data .workspace-details {
        display: flex;
        position: relative;
        height: clamp(360px, 68svh, 520px);
        overflow: hidden;
    }

    .anjana .workspace-details-text {
        order: 1;
        position: relative;
        gap: 0;
        padding-left: 22px;
        min-height: 100%;
        --anjana-timeline-ring: color-mix(in srgb, var(--project-detail-soft) 55%, var(--project-accent));
    }

    .anjana .workspace-details-video {
        display: none;
    }

    .anjana .workspace-details .project-data-about {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 6px;
        padding: 0 0 18px;
        z-index: 1;
    }

    .anjana .workspace-details .project-data-about:last-child {
        padding-bottom: 0;
    }

    .anjana .workspace-details .project-data-about .line {
        position: absolute;
        top: 0;
        left: -22px;
        width: 14px;
        height: calc(100% + 12px);
        margin: 0;
        background: none;
    }

    .anjana .workspace-details .project-data-about:last-child .line {
        height: 14px;
    }

    .anjana .workspace-details .project-data-about .line::after {
        content: '';
        position: absolute;
        top: 11px;
        left: 50%;
        bottom: 0;
        width: 1px;
        transform: translateX(-50%);
        background: color-mix(in srgb, var(--project-detail-soft) 35%, transparent);
        border-radius: 999px;
    }

    .anjana .workspace-details .project-data-about:last-child .line::after {
        display: none;
    }

    .anjana .workspace-details .project-data-about .line::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--project-detail-soft);
        transform: translate(-50%, 0);
        box-shadow: 0 0 0 3px var(--anjana-timeline-ring);
        z-index: 1;
    }

    .anjana .workspace-details .project-data-about-title {
        color: var(--project-detail-soft);
        font-size: 12px;
        font-weight: 600;
        grid-row: 1;
    }

    .anjana .workspace-details .project-data-about-text {
        font-size: 11px;
        line-height: 1.35;
        grid-row: 2;
        color: var(--project-detail-soft);
    }

    .project-data-about-text br + br {
        display: none;
    }

    .anjana .workspace-filters {
        margin-top: 100px;
    }

    .workspace-filters,
    .soluciones-filters {
        justify-content: center;
        margin: 10vh 0;
        text-align: center;
    }

    .workspace-filters-title,
    .soluciones-filters-title,
    .workspace-filters-click,
    .soluciones-filters-click {
        flex: 1 0 100%;
        text-align: center;
    }

    .workspace-filters-content .filters-img {
        width: min(76vw, 360px);
        max-width: 100%;
        align-self: start;
        justify-self: center;
    }

    .soluciones-filters-dimension--mark {
        left: 0;
        width: 140px;
        top: 82px;
    }

    .soluciones-filters-dimension--wordmark {
        left: 157px;
        width: 200px;
        top: 82px;
    }

    .soluciones-filters-callout--empresa {
        left: 31px;
        top: 116px;
    }

    .soluciones-filters-callout--wordmark {
        left: 109px;
        bottom: 120px;
    }

    .soluciones-filters-callout-text {
        text-align: left;
    }

    .workspace-filters-content-wrapper.no-rotate {
        width: 100%;
        height: calc(100% + 140px);
        place-items: start center;
        padding-top: 12px;
    }

    .workspace-filters-content-wrapper.no-rotate .filters-img,
    .workspace-filters-content-wrapper.no-rotate .visible {
        align-self: start !important;
        justify-self: center;
    }

    .workspace-filters-content-wrapper.no-rotate .filters-img {
        transform: rotate(0deg) !important;
    }

    .workspace-filters-click {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .workspace-filters-click-caption {
        display: none;
        max-width: min(100%, 320px);
        background: transparent;
        color: var(--project-detail-soft);
        white-space: normal;
        text-align: center;
    }

    .workspace-filters-content-extra,
    .workspace-filters-content-extra.n-2,
    .workspace-filters-content-extra.n-4,
    .workspace-filters-content-extra.n-6 {
        display: block !important;
        top: calc(100% + 28px);
        left: 50%;
        bottom: auto;
        width: min(78vw, 320px);
        padding: 0;
        background: transparent;
        border-radius: 0;
        color: var(--text-high);
        font-size: 10px;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
        transform: translateX(-50%);
    }

    .workspace-filters-content-extra.n-4 {
        top: calc(100% + 58px);
    }

    .workspace-filters-content-extra.n-6 {
        top: calc(100% + 88px);
    }

    .workspace-filters-content-extra.n-2::before,
    .workspace-filters-content-extra.n-4::before,
    .workspace-filters-content-extra.n-6::before {
        left: 50%;
        bottom: 100%;
        height: 22px;
        transform-origin: top;
        background-color: var(--text-high);
    }

    .workspace-filters-content-extra.n-4::before {
        height: 52px;
    }

    .workspace-filters-content-extra.n-6::before {
        height: 82px;
    }

    .workspace-filters-content-extra.n-2::after,
    .workspace-filters-content-extra.n-4::after,
    .workspace-filters-content-extra.n-6::after {
        left: calc(50% - 2px);
        bottom: calc(100% + 20px);
        background-color: var(--text-high);
    }

    .workspace-filters-content-extra.n-4::after {
        bottom: calc(100% + 50px);
    }

    .workspace-filters-content-extra.n-6::after {
        bottom: calc(100% + 80px);
    }

    .workspace-filters-click-caption:empty {
        display: none;
    }

    .project-data > .performance-result .performance-result-stats {
        gap: 0;
    }

    .project-data > .performance-result .performance-result-stat {
        border-right: 0;
        border-left: 0;
        border-top: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
        border-bottom: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
    }

    .project-data > .performance-result .performance-result-stat + .performance-result-stat {
        margin-top: -1px;
    }

    .project-data > .performance-result .performance-result-stat + .performance-result-stat::before {
        display: none;
    }

    .soluciones-filters-stage {
        width: 100%;
        transform: scale(0.82);
        transform-origin: center;
    }

    .ayunando-mockup-stage {
        --ayunando-mobile-hero-w: min(78vw, 320px);
        width: var(--ayunando-mobile-hero-w);
        height: auto;
        aspect-ratio: var(--ayunando-hero-ratio);
        max-width: 100%;
        justify-content: center;
    }

    .ayunando-hero {
        width: 100%;
        height: 100%;
    }

    .ayunando-animation--1,
    .ayunando-animation--2 {
        right: auto;
        top: 50%;
    }

    .ayunando-animation--1 {
        left: 30%;
        width: 140px;
        transform: translate(-4%, -50%);
        top: -50px;
    }

    .ayunando-animation--2 {
        left: 50%;
        width: 70px;
        transform: translate(-50%, -50%);
        bottom: -70px;
        top: auto;
    }

    .work.ayunando.expanded .project-data > .ayunando-process-timeline {
        margin: 84px 0 0;
        padding-top: 0;
    }

    .ayunando-process-timeline-step {
        grid-template-columns: 18px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 6px;
        align-items: start;
    }

    .ayunando-process-timeline-step-dot {
        grid-column: 1;
        grid-row: 1;
        margin-top: 2px;
    }

    .ayunando-process-timeline-step-title {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .ayunando-process-timeline-step-copy {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        padding: 0;
    }

    .physio-hero-bg {
        display: none;
    }

    .physiosteo .project-data .project-timeline,
    .physiosteo.expanded .project-data > .project-timeline {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: max-content;
        align-items: start;
        height: auto;
        min-height: max-content;
        overflow: visible;
    }

    .physiosteo .project-timeline .timeline-step-panel-inner,
    .physiosteo .project-timeline .timeline-step-panel[data-open] .timeline-step-panel-inner {
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .physiosteo .timeline-step-panel-inner .discipline-spectrum {
        height: auto;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 10px;
        padding: 0;
    }

    .physiosteo .discipline-spectrum::after {
        display: none;
    }

    .physiosteo .discipline-spectrum .ds-card,
    .physiosteo .discipline-spectrum .ds-card--womens,
    .physiosteo .discipline-spectrum .ds-card--osteo {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .physiosteo .discipline-spectrum .ds-label {
        align-self: auto;
        gap: 6px;
    }

    .physiosteo .discipline-spectrum .ds-name {
        max-width: none;
        font-size: 1rem;
        line-height: 1.08;
    }

    .physiosteo .discipline-spectrum .ds-tags {
        flex-direction: column;
        align-items: stretch;
        align-content: stretch;
        gap: 7px;
        width: 100%;
    }

    .physiosteo .discipline-spectrum .ds-tag {
        width: 100%;
        justify-content: center;
        min-height: 30px;
        padding: 6px 10px;
        white-space: normal;
        text-align: center;
    }

    .physiosteo .discipline-spectrum .ds-bridge {
        width: 100%;
        height: auto;
        min-height: 34px;
        padding: 7px 12px;
    }

    .physiosteo .discipline-spectrum .ds-bridge span {
        text-align: center;
        letter-spacing: 0.14em;
    }

    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel,
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel[data-open],
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel[data-opening],
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel-inner {
        min-height: min(54vh, 430px);
    }

    .physiosteo .timeline-step[data-step="2"] .wireframe-paper {
        min-height: min(48vh, 380px);
        height: min(48vh, 380px);
        touch-action: none;
    }

    .physiosteo .wireframe-paper .wf-img {
        width: auto;
        max-width: 46%;
        height: auto;
        max-height: 82%;
        object-fit: contain;
        box-shadow: none;
        touch-action: none;
    }

    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel,
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel[data-open],
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel[data-opening],
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel-inner,
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel[data-open] .timeline-step-panel-inner {
        min-height: min(68vh, 560px);
    }

    .physiosteo .timeline-step[data-step="3"] .figma-embed-wrapper {
        flex: 0 0 auto;
        width: 100%;
        height: min(68vh, 560px);
        min-height: min(68vh, 560px);
        max-height: none;
    }

    .physiosteo .timeline-step[data-step="5"] .timeline-step-panel,
    .physiosteo .timeline-step[data-step="5"] .timeline-step-panel[data-open],
    .physiosteo .timeline-step[data-step="5"] .timeline-step-panel[data-opening],
    .physiosteo .timeline-step[data-step="5"] .timeline-step-panel-inner {
        min-height: 0;
    }

    .physiosteo .timeline-step[data-step="5"] .timeline-step-image.physio-execution-stack,
    .physiosteo .physio-execution-stack {
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 0;
        grid-template-rows: auto;
        place-items: center;
    }

    .physiosteo .physio-execution-card {
        align-self: center;
        justify-self: center;
        width: min(calc(100% - 36px), 352px);
        height: auto;
        aspect-ratio: 9 / 14;
        background: transparent;
        transform-origin: center center;
        touch-action: manipulation;
    }

    .physiosteo .physio-execution-card[data-slot="0"] {
        transform: translateY(84px) scale(0.9);
        z-index: 1;
    }

    .physiosteo .physio-execution-card[data-slot="1"] {
        transform: translateY(24px) scale(0.96);
        z-index: 2;
    }

    .physiosteo .physio-execution-card[data-slot="2"] {
        transform: translateY(-48px) scale(1);
        z-index: 3;
        box-shadow: 0 8px 28px rgba(48, 51, 59, 0.22);
    }

    .physiosteo .physio-execution-card img {
        width: 100%;
        height: 100%;
        background: transparent;
        object-fit: contain;
        object-position: center center;
    }

    .omnia-process {
        width: 100%;
        min-width: 0;
        min-height: min(88vh, 720px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 26px;
    }

    .omnia-mockup {
        width: 100%;
        align-items: center;
    }

    .omnia-mockup .omnia-frame-stack {
        width: 100%;
        justify-content: center;
    }

    .omnia-mockup .omnia-frame-video {
        width: min(76vw, 340px);
        max-width: 100%;
        padding-bottom: 0;
    }

    .omnia-mockup .omnia-ghost-label.low {
        right: auto;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .omnia-frame-stack {
        transform: scale(0.9);
        transform-origin: center;
    }

    .screen-dual-view {
        width: 100%;
        min-height: min(76vh, 620px);
        gap: 16px;
    }

    .screen-dual-view-container {
        width: 100%;
        min-height: min(66vh, 540px);
        padding: 0;
        overflow: hidden;
        isolation: isolate;
        touch-action: none;
    }

    .screen-desktop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: left top;
        border-radius: 6px;
        filter: opacity(0.8);
        z-index: 0;
    }

    .screen-zoom {
        position: absolute;
        width: min(78%, 320px);
        height: auto;
        margin: 0;
        padding: 10px;
        background: #fff !important;
        z-index: 2;
        touch-action: none;
    }

    .screen-zoom-left {
        top: 16%;
        left: 8%;
    }

    .screen-zoom-right {
        top: 42%;
        right: 8%;
        bottom: auto;
        z-index: 3;
    }

    .others-project-gallery-main,
    .others-project-gallery-main--lineup-video,
    .others-project-gallery-main--multicem,
    .others-project-gallery-main--grupom {
        min-height: 180px;
    }

    .physiosteo .physio-execution-card,
    .physiosteo .physio-execution-card[data-slot="2"] {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .physiosteo .physio-execution-card img {
        box-shadow: none;
        filter: none;
    }

    .omnia-process {
        min-height: auto;
        gap: 44px;
    }

    .omnia-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .omnia-ghost-label,
    .omnia-ghost-label.high,
    .omnia-ghost-label.high-left,
    .omnia-ghost-label.high-right,
    .omnia-ghost-label.middle,
    .omnia-ghost-label.middle:first-child,
    .omnia-ghost-label.middle:last-child,
    .omnia-ghost-label.low {
        position: static;
        inset: auto;
        transform: none;
        font-size: clamp(2.6rem, 13vw, 4.6rem);
        line-height: 0.92;
        text-align: center;
        white-space: normal;
    }

    .omnia-mockup .omnia-frame-video {
        width: 65%;
        max-width: 65%;
    }

    .omnia-mockup .omnia-frame-stack {
        transform: none;
    }

    .omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(1):hover {
        transform: translateY(24px) rotate(-2.5deg);
        z-index: 10;
    }

    .omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(2):hover {
        transform: translateY(4px) rotate(-0.8deg);
        z-index: 10;
    }

    .omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(3):hover {
        transform: translateY(4px) rotate(0.8deg);
        z-index: 10;
    }

    .omnia-wireframes .omnia-frame-stack .omnia-frame:nth-child(4):hover {
        transform: translateY(24px) rotate(2.5deg);
        z-index: 10;
    }

    .omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(1):hover {
        transform: translateY(20px) rotate(-2deg);
        z-index: 10;
    }

    .omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(2):hover {
        transform: translateY(0) rotate(0deg);
        z-index: 10;
    }

    .omnia-hifi .omnia-frame-stack .omnia-frame:nth-child(3):hover {
        transform: translateY(20px) rotate(2deg);
        z-index: 10;
    }

    .omnia-mockup .omnia-frame-stack .omnia-frame:hover {
        transform: none;
        z-index: 10;
    }

    .omnia-mockup .omnia-ghost-label.low {
        width: 100%;
        min-height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        text-align: center;
    }

    .clinical-report-anatomy {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(48px, auto));
        grid-auto-rows: unset;
        gap: 6px;
        min-height: 480px;
        overflow: hidden;
    }

    .clinical-report-content-item-title {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }

    .clinical-report-anatomy .workspace-design-system-content-item-explanation {
        grid-column: 1 / 9;
        grid-row: 2 / 3;
    }

    .clinical-report-anatomy-content-item.item-01 {
        grid-column: 1 / 5;
        grid-row: 3 / 6;
    }

    .clinical-report-anatomy-content-item.item-02 {
        grid-column: 1 / 9;
        grid-row: 7 / 7;
    }

    .clinical-report-anatomy-content-item.item-03 {
        grid-column: 5 / 9;
        grid-row: 3 / 7;
    }

    .clinical-report-anatomy-content-item.item-04 {
        grid-column: 1 / 5;
        grid-row: 6 / 7;
    }

    .clinical-report-anatomy .clinical-report-pdf {
        background-position: left;
        background-size: cover;
    }

    .soluciones-showcase .soluciones-hero {
        width: calc(100% + 28px);
        max-width: none;
        margin-inline: -14px;
        border-radius: 0;
        box-shadow: none;
    }

    .soluciones-showcase .soluciones-hero video {
        width: 112%;
        height: 100%;
        transform: translateX(-5.35%);
        object-fit: cover;
        object-position: center top;
    }

    .others-project-gallery {
        height: min(74svh, 620px);
        min-height: 440px;
        overflow: visible;
    }

    .others-project-gallery-main,
    .others-project-gallery-main--lineup-video,
    .others-project-gallery-main--multicem,
    .others-project-gallery-main--grupom {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        transform: none;
        z-index: 2;
    }

    .others-project-gallery-main video,
    .others-project-gallery-main img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }

    .others-project-gallery-main--lineup-video video {
        object-fit: cover;
    }

    .others-project .others-project-gallery-mock,
    .others-project--lineup .others-project-gallery-mock--left,
    .others-project--lineup .others-project-gallery-mock--right,
    .others-project--grupom .others-project-gallery-mock--left,
    .others-project--grupom .others-project-gallery-mock--right,
    .others-project--grupom .grupom-gallery-extra,
    .others-project--multicem .others-project-gallery-mock--left,
    .others-project--multicem .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--colors {
        position: absolute;
        min-height: 0;
        z-index: 3;
    }

    .others-project--lineup .others-project-gallery-mock--left,
    .others-project--grupom .others-project-gallery-mock--left,
    .others-project--multicem .others-project-gallery-mock--left {
        top: auto;
        bottom: -18px;
        left: 50%;
        width: 78%;
        transform: translateX(-50%);
    }

    .others-project--lineup .others-project-gallery-mock--right,
    .others-project--grupom .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--colors {
        top: auto;
        right: auto;
        bottom: -42px;
        left: 50%;
        width: 68%;
        transform: translateX(-50%);
    }

    .others-project--grupom .grupom-gallery-extra {
        top: auto;
        bottom: -22px;
        left: 4%;
        width: 28%;
        height: 46%;
        transform: none;
    }

    .others-project-details {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 22px;
        margin-top: 42px;
        --others-timeline-ring: color-mix(in srgb, var(--project-detail-soft) 55%, var(--project-accent));
    }

    .others-project-details .project-data-about {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 6px;
        padding: 0 0 18px;
        z-index: 1;
    }

    .others-project-details .project-data-about:last-child {
        padding-bottom: 0;
    }

    .others-project-details .project-data-about .line {
        position: absolute;
        top: 0;
        left: -22px;
        width: 14px;
        height: calc(100% + 12px);
        margin: 0;
        background: none;
    }

    .others-project-details .project-data-about:last-child .line {
        height: 14px;
    }

    .others-project-details .project-data-about .line::after {
        content: '';
        position: absolute;
        top: 11px;
        left: 50%;
        bottom: 0;
        width: 1px;
        transform: translateX(-50%);
        background: color-mix(in srgb, var(--project-detail-soft) 35%, transparent);
        border-radius: 999px;
    }

    .others-project-details .project-data-about:last-child .line::after {
        display: none;
    }

    .others-project-details .project-data-about .line::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--project-detail-soft);
        transform: translate(-50%, 0);
        box-shadow: 0 0 0 3px var(--others-timeline-ring);
        z-index: 1;
    }

    .work.others .others-project-details .project-data-about-title {
        color: var(--project-detail-soft);
        font-size: 12px;
        font-weight: 600;
        grid-row: 1;
    }

    .work.others .others-project-details .project-data-about-text {
        color: var(--project-detail-soft);
        font-size: 11px;
        line-height: 1.35;
        grid-row: 2;
    }

    .workspace-filters-content {
        overflow: visible;
    }

    .workspace-filters-content-wrapper.no-rotate {
        height: 100%;
        padding-top: 0;
        place-items: center;
    }

    .workspace-filters-content-wrapper.no-rotate .filters-img,
    .workspace-filters-content-wrapper.no-rotate .visible {
        align-self: start !important;
        padding-top: 20%;
    }

    .workspace-filters-content-extra,
    .workspace-filters-content-extra.n-2,
    .workspace-filters-content-extra.n-4,
    .workspace-filters-content-extra.n-6 {
        left: 0;
        top: calc(100% + 12px);
        width: 100%;
        max-width: 100%;
        text-align: center;
        transform: none;
    }

    .workspace-filters-content-extra.n-4 {
        top: calc(100% + 42px);
    }

    .workspace-filters-content-extra.n-6 {
        top: calc(100% + 72px);
    }

    .workspace-filters-content-extra.n-2.animate::before,
    .workspace-filters-content-extra.n-4.animate::before,
    .workspace-filters-content-extra.n-6.animate::before {
        display: block;
        left: 50%;
        bottom: 100%;
        width: 1px;
        height: 38px;
        background-color: var(--text-high);
        transform-origin: bottom;
    }

    .workspace-filters-content-extra.n-4.animate::before {
        height: 68px;
    }

    .workspace-filters-content-extra.n-6.animate::before {
        height: 98px;
    }

    .workspace-filters-content-extra.n-2::after,
    .workspace-filters-content-extra.n-4::after,
    .workspace-filters-content-extra.n-6::after {
        display: none;
    }

    .physio-hero {
        min-height: 0;
        height: auto;
        margin: 0 auto;
    }

    .physio-hero-mobile-video {
        width: 65%;
        height: 600px;
        min-height: 600px;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .physiosteo .discipline-spectrum .ds-tag-icon {
        display: none;
    }

    .physiosteo .discipline-spectrum .ds-tag,
    .physiosteo .discipline-spectrum .ds-bridge {
        border-radius: 999px;
        min-height: 31px;
        padding: 7px 12px;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.34);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        font-weight: 600;
    }

    .physiosteo .physio-execution-card {
        pointer-events: auto;
    }

    .physiosteo .physio-execution-card[data-slot="2"] {
        pointer-events: auto;
    }

    .omnia-group {
        gap: 4px;
    }

    .omnia-wireframes,
    .omnia-hifi,
    .omnia-mockup {
        gap: 6px;
    }

    .work.omnia .omnia-ghost-label,
    .work.omnia .omnia-ghost-label.high,
    .work.omnia .omnia-ghost-label.high-left,
    .work.omnia .omnia-ghost-label.high-right,
    .work.omnia .omnia-ghost-label.middle,
    .work.omnia .omnia-ghost-label.middle:first-child,
    .work.omnia .omnia-ghost-label.middle:last-child,
    .work.omnia .omnia-ghost-label.low {
        width: 100%;
        margin-top: -2px;
        font-size: clamp(2.2rem, 11vw, 4rem);
        font-weight: 700;
        line-height: 0.9;
        align-self: center;
        text-align: center;
    }

    .work.omnia .omnia-ghost-label {
        display: none;
    }

    .omnia-mockup .omnia-ghost-label.low {
        margin-top: 6px;
        justify-content: center;
        overflow: visible;
    }

    .soluciones-filters-stage {
        width: min(100%, 360px);
        margin-inline: auto;
        transform: none;
    }

    .soluciones-filters-dimension--mark {
        left: 0;
        top: 58%;
        width: 39%;
    }

    .soluciones-filters-dimension--wordmark {
        left: 45%;
        top: 58%;
        width: 53%;
    }

    .soluciones-filters-callout--empresa {
        left: 8%;
        top: 75%;
    }

    .soluciones-filters-callout--wordmark {
        left: 31%;
        bottom: 17%;
    }

    .ayunando-mockup-stage {
        --ayunando-mobile-hero-w: 65vw;
        width: min(var(--ayunando-mobile-hero-w), 320px);
        height: auto;
        aspect-ratio: var(--ayunando-hero-ratio);
    }

    .ayunando-hero {
        width: 100%;
        height: 100%;
    }

    .others-project-gallery {
        height: 42vh;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: visible;
    }

    .others-project-gallery-main,
    .others-project-gallery-main--lineup-video,
    .others-project-gallery-main--multicem,
    .others-project-gallery-main--grupom {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .others-project--lineup .others-project-gallery-main--lineup-video {
        width: 126%;
        height: 100%;
    }

    .others-project-gallery-main video,
    .others-project-gallery-main img,
    .others-project-gallery-main--lineup-video video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .others-project .others-project-gallery-mock,
    .others-project--lineup .others-project-gallery-mock--left,
    .others-project--lineup .others-project-gallery-mock--right,
    .others-project--grupom .others-project-gallery-mock--left,
    .others-project--grupom .others-project-gallery-mock--right,
    .others-project--grupom .grupom-gallery-extra,
    .others-project--multicem .others-project-gallery-mock--left,
    .others-project--multicem .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--colors {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: 74%;
        height: auto;
        align-self: center;
    }

    .others-project--lineup .others-project-gallery-mock--left,
    .others-project--grupom .others-project-gallery-mock--left,
    .others-project--multicem .others-project-gallery-mock--left {
        margin-top: -4px;
    }

    .others-project--lineup .others-project-gallery-mock.others-project-gallery-mock--left.others-project-gallery-mock--image {
        z-index: -1;
    }

    .others-project--lineup .others-project-gallery-mock--right,
    .others-project--grupom .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--right,
    .others-project--multicem .others-project-gallery-mock--colors {
        width: 68%;
        margin-top: -10px;
    }

    .others-project-gallery-main.others-project-gallery-main--multicem {
        width: 220%;
        align-self: center;
    }

    .others-project--multicem .others-project-gallery-mock--right {
        margin-top: -130px;
    }

    .others-project-details .project-data-about .line::after {
        background: color-mix(in srgb, var(--project-detail-soft) 35%, transparent);
    }

    .work.others .others-project-details .line {
        background: transparent;
    }

    .omnia-mockup {
        align-items: center;
        right: auto;
        margin-top: 63px;
    }

    .omnia-mockup .omnia-frame-stack {
        justify-content: center;
    }

    .omnia-mockup .omnia-ghost-label.low {
        left: 0;
        right: auto;
        width: 100%;
        justify-content: center;
        text-align: center;
        transform: none;
    }

    .soluciones-showcase .soluciones-hero {
        width: 80%;
        max-width: 80%;
        margin-inline: auto;
        border-radius: 2px;
        overflow: hidden;
    }

    .soluciones-showcase .soluciones-hero video {
        width: 100%;
        transform: none;
    }

    .soluciones-filters-content {
        height: auto;
        min-height: 520px;
        align-items: flex-start;
    }

    .soluciones-filters-stage {
        width: min(88%, 360px);
        padding-bottom: 150px;
    }

    .soluciones-filters-annotations {
        top: calc(100% + 18px);
        bottom: auto;
        height: 126px;
        inset-inline: 0;
    }

    .soluciones-filters-dimension--mark,
    .soluciones-filters-dimension--wordmark,
    .soluciones-filters-callout--empresa,
    .soluciones-filters-callout--wordmark {
        top: auto;
        bottom: auto;
        transform: none;
    }

    .soluciones-filters-dimension--mark {
        left: 0;
        width: 42%;
        top: 0;
    }

    .soluciones-filters-dimension--wordmark {
        left: 45%;
        width: 56%;
        top: 0;
    }

    .soluciones-filters-callout--empresa {
        left: 0;
        top: 58px;
        width: 48%;
    }

    .soluciones-filters-callout--wordmark {
        left: 52%;
        top: 58px;
        width: 48%;
    }

    .soluciones-filters-callout::before,
    .soluciones-filters-callout::after {
        display: none;
    }

    .soluciones-filters-callout-text,
    .soluciones-filters-dimension-label {
        white-space: normal;
        text-align: center;
    }

    .work.others.expanded .project-data {
        overflow-x: hidden;
        padding-bottom: 50vh;
    }

    .work.others.expanded .project-data > *,
    .work.others.expanded .others-project,
    .work.others.expanded .others-project-gallery {
        max-width: 100%;
        overflow-x: hidden;
    }

    .work.others.expanded .project-data-intro,
    .work.others.expanded .project-data-intro > * {
        max-width: 100%;
    }

    .work.others.expanded .others-project-gallery-main.others-project-gallery-main--multicem {
        width: 100%;
    }

    .others-project-gallery-main.others-project-gallery-main--grupom img {
        width: 150%;
    }

    .others-project-gallery-mock.grupom-gallery-extra.others-project-gallery-mock--image img:first-child {
        display: none;
    }

    .workspace-design-system-content-item-title,
    .clinical-report-content-item-title {
        grid-column: 1 / 9;
        grid-row: 1 / 2;
    }

    .workspace-design-system-content-item-explanation {
        grid-column: 1 / 9;
        grid-row: 2 / 3;
    }

    .workspace-design-system-content-item-colors {
        grid-column: 1 / 5;
        grid-row: 3 / 4;
    }

    .workspace-design-system-content-item-icons {
        grid-column: 5 / 9;
        grid-row: 3 / 3;
    }

    .workspace-design-system-content-item-icons-wrapper {
        grid-template-columns: repeat(6, 1fr);
    }

    .workspace-design-system-content-item-modal {
        grid-column: 1 / 9;
        grid-row: 4 / 5;
        align-items: center;
    }

    .workspace-design-system-content-item-modal img,
    .workspace-design-system-content-item-states img,
    .workspace-design-system-content-item-switchs img,
    .workspace-design-system-content-item-buttons img,
    .workspace-design-system-content-item-measures img,
    .workspace-design-system-content-item-components img {
        display: block;
        width: 100%;
        height: auto !important;
        max-height: none;
        object-fit: contain;
        align-self: center;
    }

    .workspace-design-system-content-item-states {
        grid-column: 1 / 9;
        grid-row: 5 / 6;
        align-items: center;
    }

    .workspace-design-system-content-item-switchs {
        grid-column: 1 / 9;
        grid-row: 6 / 7;
        align-items: center;
    }

    .workspace-design-system-content-item-buttons {
        grid-column: 1 / 9;
        grid-row: 7 / 7;
    }

    .workspace-design-system-content-item-buttons-scale {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .workspace-design-system-content-item-buttons-wrapper {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        transform: none;
        justify-content: space-between;
    }

    .workspace-design-system-content-item-measures {
        display: none;
        grid-column: 7 / 9;
        grid-row: 7 / 8;
        align-items: center;
    }

    .workspace-design-system-content-item-measures img {
        margin: auto;
    }

    .workspace-design-system-content-item-components {
        grid-column: 1 / 9;
        grid-row: 8 / 8;
        align-items: center;
    }

    .screen-dual-view-container .screen-desktop {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center top;
    }

    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel,
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel[data-open],
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel[data-opening],
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel-inner {
        min-height: 0;
    }

    .physiosteo .timeline-step[data-step="2"] .wireframe-paper {
        height: min(43vh, 340px);
        min-height: min(43vh, 340px);
        touch-action: auto;
        pointer-events: none;
    }

    .physiosteo .wireframe-paper .wf-img {
        max-width: 43%;
        max-height: 76%;
        cursor: default;
        touch-action: auto;
        pointer-events: none;
    }

    .physiosteo .wireframe-paper .wf-img:first-child {
        left: 5% !important;
    }

    .physiosteo .wireframe-paper .wf-img:last-child {
        right: 5% !important;
        left: auto !important;
    }

    .physiosteo .timeline-step[data-step="5"] .timeline-step-image.physio-execution-stack,
    .physiosteo .physio-execution-stack {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        min-height: clamp(430px, 62svh, 560px);
        overflow: visible;
    }

    .physiosteo .physio-execution-stack::after {
        content: "(CLICK TO EXPLORE)";
        position: absolute;
        left: 50%;
        top: calc(50% + 190px);
        z-index: 4;
        color: var(--text-high);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
        white-space: nowrap;
    }

    .physiosteo .physio-execution-card {
        width: min(78vw, 352px);
        aspect-ratio: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        box-shadow: none;
    }

    .physiosteo .physio-execution-card[data-slot="0"] {
        transform: translateY(72px) scale(0.9);
    }

    .physiosteo .physio-execution-card[data-slot="1"] {
        transform: translateY(18px) scale(0.96);
    }

    .physiosteo .physio-execution-card[data-slot="2"] {
        transform: translateY(-42px) scale(1);
        box-shadow: none;
    }

    .physiosteo .physio-execution-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 2px;
    }

    .physiosteo .physio-execution-card[data-slot="2"] img {
        box-shadow: 0 8px 28px rgba(48, 51, 59, 0.22);
    }

    .screen-dual-view {
        height: auto;
        min-height: 0;
        gap: 14px;
        margin-bottom: 26px;
    }

    .screen-dual-view-container {
        --omnia-agreements-top-offset: 120px;
        min-height: 0;
        padding: 20px;
        box-sizing: border-box;
        overflow: visible;
        touch-action: auto;
    }

    .screen-dual-view-container .screen-desktop,
    .screen-desktop {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        margin: 0;
        object-fit: contain;
        filter: none;
        z-index: 2;
    }

    .screen-zoom {
        width: min(72%, 320px);
        min-height: 128px;
        padding: 8px;
        box-sizing: border-box;
        object-fit: contain;
        touch-action: auto;
        pointer-events: none;
    }

    .screen-draggable {
        cursor: default;
        box-shadow: 0 10px 28px rgba(74, 74, 74, 0.22);
    }

    .screen-zoom-left {
        display: none;
        top: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        z-index: 1;
    }

    .screen-zoom-right {
        display: none;
        top: calc(var(--omnia-agreements-top-offset) + min(46vw, 204px));
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }

    .soluciones-showcase .soluciones-hero {
        width: min(100%, 420px);
        max-width: 100%;
        margin-inline: auto;
        aspect-ratio: 16 / 9;
        border-radius: 2px;
        overflow: hidden;
        line-height: 0;
    }

    .soluciones-showcase .soluciones-hero video {
        width: 112%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: translateX(-5.35%);
    }

    .soluciones-filters-content {
        min-height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        padding-inline: 18px;
    }

    .soluciones-filters-stage {
        width: min(96%, 420px);
        margin: auto;
        padding-bottom: 38px;
        transform: none;
        overflow: visible;
    }

    .soluciones-filters-logo {
        overflow: visible;
        filter: none;
    }

    .soluciones-filters-logo-svg {
        overflow: visible;
        filter: none;
        transition: none;
        transform: translateZ(0);
    }

    .soluciones-filters-guides {
        width: 119%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .soluciones-filters-annotations {
        top: calc(100% + 14px);
        height: 112px;
    }

    .soluciones-filters-callout::before,
    .soluciones-filters-callout::after {
        display: block;
    }

    .soluciones-filters-callout::before {
        width: 1px;
    }

    .soluciones-filters-callout::after {
        display: none;
    }

    .soluciones-filters-callout-text,
    .soluciones-filters-dimension-label {
        text-align: center;
    }

    .soluciones-filters-callout--empresa::before {
        left: 50%;
        bottom: 100%;
        height: 72px;
        transform-origin: bottom;
    }

    .soluciones-filters-callout--empresa::after {
        left: calc(50% - 2px);
        top: -75px;
    }

    .soluciones-filters-callout--wordmark::before {
        left: 50%;
        top: auto;
        bottom: 100%;
        height: 72px;
        transform-origin: bottom;
    }

    .soluciones-filters-callout--wordmark::after {
        display: none;
        left: calc(50% - 2px);
        top: -75px;
    }

    .ayunando-mockup {
        padding-top: 72px;
        padding-bottom: 120px;
    }

    .ayunando-mockup-stage {
        /* Keep the reserved phone box; don't force a pixel min-height that fights aspect-ratio. */
        min-height: 0;
    }

    .ayunando-hero {
        min-height: 0;
    }

    .ayunando-animation--1 {
        left: 8%;
        right: auto;
        top: auto;
        bottom: -58px;
        width: 50%;
        z-index: 2;
        transform: none;
    }

    .ayunando-animation--2 {
        left: auto;
        right: 2%;
        top: auto;
        bottom: -86px;
        width: 20%;
        z-index: 2;
    }

    .others-project--lineup .others-project-gallery {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .others-project--lineup .others-project-gallery-main--lineup-video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .others-project--lineup .others-project-gallery-main--lineup-video {
        width: 100%;
    }

    .others-project--lineup .others-project-gallery-main--lineup-video video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .others-project--lineup .others-project-gallery-mock.others-project-gallery-mock--left.others-project-gallery-mock--image {
        display: none;
    }

    .others-project--lineup .others-project-gallery-mock--right {
        display: none;
    }

    .others-project--grupom .others-project-gallery {
        height: clamp(420px, 62svh, 560px);
        display: grid;
        place-items: center;
        overflow: visible;
    }

    .others-project--grupom .grupom-gallery-extra,
    .others-project--grupom .others-project-gallery-mock--left {
        display: none;
    }

    .others-project--grupom .others-project-gallery-main--grupom {
        grid-area: 1 / 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        z-index: 1;
    }

    .others-project-gallery-main.others-project-gallery-main--grupom img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .others-project--grupom .others-project-gallery-mock--right {
        grid-area: 1 / 1;
        width: min(72vw, 320px);
        height: min(72vw, 320px);
        margin: 0;
        padding: 28px;
        z-index: 3;
        background: var(--white);
        align-self: center;
        justify-self: center;
    }

    .others-project--multicem .others-project-gallery {
        height: clamp(430px, 45svh, 520px);
        min-height: clamp(430px, 45svh, 520px);
        display: grid;
        place-items: start center;
        grid-template-rows: auto 1fr auto;
        overflow: visible;
        padding-bottom: 26px;
    }

    .others-project--multicem .others-project-gallery-main--multicem {
        grid-area: 1 / 1;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        z-index: 2;
        overflow: hidden;
    }

    .others-project--multicem .others-project-gallery-main--multicem img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .others-project--multicem .others-project-gallery-mock--left {
        display: none;
    }

    .others-project--multicem .others-project-gallery-mock--right {
        grid-area: 1 / 1 / -1 / -1;
        width: min(60vw, 264px);
        height: auto;
        margin: 0;
        padding: 12px;
        z-index: 4;
        align-self: center;
        justify-self: center;
        transform: translateY(26%);
        background: var(--white);
        overflow: visible;
    }

    .others-project--multicem .multicem-logo-animation svg {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .others-project--multicem .others-project-gallery-mock--colors {
        display: none;
        grid-area: 1 / 1 / -1 / -1;
        width: min(58vw, 252px);
        height: auto;
        margin: 0;
        padding: 6px;
        z-index: 3;
        align-self: end;
        justify-self: center;
        transform: translateY(-56px);
        overflow: hidden;
    }

    .others-project--multicem .others-project-gallery-mock--colors .ayunando-details-colors {
        gap: 3px;
        font-size: 8px;
    }

    .others-project--multicem .others-project-gallery-mock--colors .ayunando-details-color {
        min-height: 0;
        padding: 4px 6px;
        line-height: 1.05;
    }

    .mobile-entry-media-trigger {
        cursor: zoom-in;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-entry-media-modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: block;
        background: rgba(255, 255, 255, 0);
        pointer-events: auto;
        touch-action: none;
        transition: background 340ms ease;
    }

    .mobile-entry-media-modal.is-open {
        background: rgba(255, 255, 255, 0.9);
    }

    .mobile-entry-media-modal-media {
        position: fixed;
        z-index: 10001;
        display: block;
        margin: 0;
        border-radius: 10px;
        object-fit: contain;
        background: transparent;
        background-image: none;
        box-shadow: none;
        filter: none;
        touch-action: none;
        transform-origin: center center;
        transform: translateZ(0);
        transition:
            left 360ms cubic-bezier(0.33, 1, 0.68, 1),
            top 360ms cubic-bezier(0.33, 1, 0.68, 1),
            width 360ms cubic-bezier(0.33, 1, 0.68, 1),
            height 360ms cubic-bezier(0.33, 1, 0.68, 1),
            border-radius 360ms cubic-bezier(0.33, 1, 0.68, 1),
            box-shadow 360ms ease;
    }

    .mobile-entry-media-modal-media--video {
        overflow: hidden;
        line-height: 0;
    }

    .mobile-entry-media-modal-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .mobile-entry-media-modal.is-closing {
        background: rgba(255, 255, 255, 0);
    }
}

.others-project--grupom .others-project-gallery-main--grupom {
    z-index: 1;
}

.others-project--grupom .grupom-gallery-extra {
    z-index: 2;
}

.others-project--grupom .others-project-gallery-mock--left {
    z-index: 3;
}

.others-project--grupom .others-project-gallery-mock--right {
    z-index: 4;
}

.others-project--multicem .others-project-gallery-main--multicem {
    z-index: 1;
}

.others-project--multicem .others-project-gallery-mock--left {
    z-index: 3;
}

.others-project--multicem .others-project-gallery-mock--colors {
    z-index: 2;
}

.others-project--multicem .others-project-gallery-mock--right {
    z-index: 4;
}

/* -------------------------------------- TABLET PROJECT REFINEMENTS -------------------------------------- */

@media (min-width: 721px) and (max-width: 1180px) {
    :root {
        --tablet-project-section-margin: 12vh;
    }

    .work.expanded .project-data,
    .physiosteo.expanded .project-data {
        gap: 0;
    }

    .work.expanded .project-data > div:not(.work-navigation):not(.close-button),
    .work.expanded .project-data > section,
    .work.expanded .project-data > span:not(.separator) {
        margin-top: var(--tablet-project-section-margin);
        margin-bottom: var(--tablet-project-section-margin);
    }

    /* Project cards and expanded-project controls */
    .work:not(.expanded) .work-logo {
        display: none;
    }

    .work.expanded .work-logo {
        display: block;
    }

    /* Match the mobile expanded-project header: date | centered logo | title. */
    .work.expanded .project-info {
        position: relative;
        min-height: 80px;
        align-items: center;
    }

    .work.expanded .project-info .project-date,
    .work.expanded .project-info .project-name {
        position: relative;
        z-index: 2;
        max-width: 40%;
    }

    .work.expanded .project-info .project-name {
        margin-left: auto;
        text-align: right;
    }

    .work.expanded .work-logo {
        top: 40px;
        right: auto;
        left: 50%;
        width: 26px;
        height: 26px;
        opacity: 1;
        transform: translate(-50%, -50%);
        filter: brightness(0) invert(1);
        z-index: 95;
    }

    .work.expanded .work-logo svg,
    .work.expanded .work-logo svg * {
        fill: var(--bg);
    }

    .work.expanded .work-logo img {
        filter: brightness(0) invert(1);
    }

    .work-navigation,
    .close-button,
    .work.expanded .work-navigation,
    .work.expanded .close-button {
        display: none !important;
    }

    /* Anjana: lead with the product video on tablet. */
    .work.anjana.expanded .project-data > .workspace-hero,
    .work.anjana.expanded .project-data > .workspace-hero + .separator {
        display: none;
    }

    .anjana .project-data .workspace-details {
        gap: clamp(18px, 3vw, 30px);
    }

    .anjana .workspace-details-text {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 48px);
        width: 100%;
    }

    .anjana .workspace-details-text .project-data-about {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 0;
    }

    .anjana .workspace-details-text .line {
        position: relative;
        grid-row: 1;
        width: 100%;
        margin: 0 0 2px;
    }

    .anjana .workspace-details-text .project-data-about-title {
        grid-row: 2;
        font-size: 13px;
        font-weight: 600;
    }

    .anjana .workspace-details-text .project-data-about-text {
        grid-row: 3;
        font-size: 12px;
        line-height: 1.42;
    }

    /* Anjana filters: keep every rotated state inside a safe visual area. */
    .anjana .workspace-filters {
        overflow: visible;
    }

    .anjana .workspace-filters-content {
        width: 100%;
        height: clamp(300px, 45vw, 430px);
        aspect-ratio: auto;
        overflow: visible;
        padding: clamp(20px, 4vw, 42px);
        box-sizing: border-box;
    }

    .anjana .workspace-filters-content-wrapper {
        width: min(72vw, 590px);
        max-width: 82%;
        height: 100%;
        place-items: center;
    }

    .anjana .workspace-filters-content-wrapper:not(.no-rotate) > .filters-img {
        grid-area: 1 / 1;
        justify-self: center;
        align-self: center;
        width: 62%;
        max-width: 62%;
        max-height: 72%;
        object-fit: contain;
        object-position: center;
    }

    .anjana .workspace-filters-content-wrapper:not(.no-rotate) > div.filters-img {
        display: grid;
        place-items: center;
        height: auto;
    }

    .anjana .workspace-filters-content-wrapper:not(.no-rotate) > div.filters-img > img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate {
        width: min(72vw, 590px);
        max-width: 86%;
        height: 100%;
        padding: 0;
        place-items: stretch;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate > .filters-img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        padding: 0;
        transform: none !important;
        object-fit: contain;
        object-position: center top;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate > img.filters-img.visible {
        display: block;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate > div.filters-img.visible {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 16px;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate > div.filters-img.visible > img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: contain;
        object-position: center top;
    }

    .anjana .workspace-filters-content-extra,
    .anjana .workspace-filters-content-extra.n-2,
    .anjana .workspace-filters-content-extra.n-4,
    .anjana .workspace-filters-content-extra.n-6 {
        position: relative;
        inset: auto;
        display: none;
        width: 100%;
        padding: 12px 0 0;
        border-top: 1px solid color-mix(in srgb, var(--project-detail-soft) 55%, transparent);
        border-radius: 0;
        background: transparent;
        color: var(--project-detail-soft);
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
        opacity: 1;
        transform: none;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate > div.filters-img.visible > .workspace-filters-content-extra {
        display: block;
        opacity: 0;
        animation: none !important;
        transition: opacity 180ms ease-out;
    }

    .anjana .workspace-filters-content-wrapper.no-rotate > div.filters-img.visible > .workspace-filters-content-extra.animate {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .anjana .workspace-filters-content-extra::before,
    .anjana .workspace-filters-content-extra::after {
        display: none !important;
    }

    /* Results use one shared grid line instead of doubled cell borders. */
    .project-data > .performance-result .performance-result-stats {
        gap: 0;
        border-top: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
        border-left: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
    }

    .project-data > .performance-result .performance-result-stat {
        border: 0;
        border-right: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
        border-bottom: 1px dashed color-mix(in srgb, var(--bg) 38%, transparent);
    }

    /* Physiosteo */
    .work.physiosteo.expanded .project-data > div.physio-hero-panel {
        height: 50vh;
        min-height: 50vh;
        aspect-ratio: auto;
        overflow: visible;
        margin-block: 0;
    }

    .physio-hero {
        min-height: 50vh;
        height: 50vh;
    }

    .physio-hero-mobile-video {
        width: min(46vw, 360px);
        height: 50vh;
        min-height: 0;
        max-height: 50vh;
        object-fit: contain;
    }

    .physiosteo .project-timeline .timeline-step,
    .physiosteo .project-timeline .timeline-step[data-step="1"],
    .physiosteo .project-timeline .timeline-step[data-step="2"],
    .physiosteo .project-timeline .timeline-step[data-step="3"],
    .physiosteo .project-timeline .timeline-step[data-step="4"],
    .physiosteo .project-timeline .timeline-step[data-step="5"] {
        margin-block: var(--tablet-project-section-margin);
    }

    .physiosteo .timeline-step-header .timeline-step-title,
    .physiosteo .project-timeline[data-has-expanded] .timeline-step:not([data-expanded]) .timeline-step-title,
    .physiosteo .project-timeline .timeline-step[data-expanded] .timeline-step-title {
        font-size: clamp(18px, 2.7vw, 22px) !important;
    }

    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel,
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel[data-open],
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel[data-opening],
    .physiosteo .timeline-step[data-step="2"] .timeline-step-panel-inner,
    .physiosteo .timeline-step[data-step="2"] .wireframe-paper {
        height: min(48vh, 500px);
        min-height: min(48vh, 500px);
        max-height: none;
    }

    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel,
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel[data-open],
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel[data-opening],
    .physiosteo .timeline-step[data-step="3"] .timeline-step-panel-inner,
    .physiosteo .timeline-step[data-step="3"] .figma-embed-wrapper {
        height: min(56vh, 570px);
        min-height: min(56vh, 570px);
        max-height: none;
    }

    /* Omnia: two compact image rows on the left, result video on the right. */
    .work.omnia.expanded .project-data > .omnia-process {
        display: grid;
        grid-template-columns: minmax(0, 1.22fr) minmax(190px, 0.78fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: clamp(18px, 3vw, 34px);
        width: 100%;
        min-height: clamp(460px, 62vh, 620px);
        padding: clamp(18px, 3vw, 30px);
        overflow: hidden;
    }

    .omnia-process > br,
    .omnia-process .omnia-ghost-label {
        display: none;
    }

    .omnia-process .omnia-ghost-label.low {
        right: -19px;
        bottom: -40px;
    }

    .omnia-process .omnia-group {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        transform: none;
        align-items: center;
        justify-content: center;
    }

    .omnia-process .omnia-wireframes {
        grid-column: 1;
        grid-row: 1;
        top: 16%;
        left: 3%;
    }

    .omnia-process .omnia-hifi {
        grid-column: 1;
        grid-row: 2;
        top: 65%;
        left: 15%;
    }

    .omnia-process .omnia-mockup {
        grid-column: 2;
        grid-row: 1 / 3;
        align-items: center;
    }

    .omnia-process .omnia-frame-stack {
        max-width: 100%;
        justify-content: center;
    }

    .omnia-process .omnia-frame {
        width: clamp(82px, 11.5vw, 104px);
    }

    .omnia-process .omnia-hifi .omnia-frame {
        width: clamp(92px, 12.5vw, 118px);
    }

    .omnia-process .omnia-frame-stack .omnia-frame:not(:first-child) {
        margin-left: clamp(-25px, -3vw, -16px);
    }

    .omnia-process .omnia-frame-video {
        width: min(24vw, 230px);
        max-width: 100%;
        padding: 0;
    }

    .omnia-process .omnia-frame-video video {
        width: 100%;
        height: auto;
        max-height: 54vh;
        object-fit: contain;
    }

    /* Omnia report anatomy: compact title/copy rows and no unused vertical space. */
    .clinical-report-anatomy {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: 40px 88px repeat(4, minmax(72px, 1fr));
        grid-auto-rows: unset;
        gap: 8px;
        width: 100%;
        min-width: 0;
        height: min(64vh, 640px);
        min-height: 520px;
        overflow: hidden;
    }

    .clinical-report-content-item-title {
        grid-column: 1 / 4;
        grid-row: 1;
        min-height: 0;
        padding: 0 10px;
        font-size: 16px;
        line-height: 1;
        white-space: nowrap;
    }

    .clinical-report-anatomy .workspace-design-system-content-item-explanation {
        grid-column: 1 / 4;
        grid-row: 2;
        min-height: 0;
        padding: 10px;
        font-size: 10px;
        line-height: 1.35;
    }

    .clinical-report-anatomy-content-item.item-01 {
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    .clinical-report-anatomy-content-item.item-02 {
        grid-column: 6 / 9;
        grid-row: 1 / 7;
    }

    .clinical-report-anatomy-content-item.item-03 {
        grid-column: 1 / 3;
        grid-row: 3 / 7;
    }

    .clinical-report-anatomy-content-item.item-04 {
        grid-column: 3 / 6;
        grid-row: 3 / 7;
    }

    .work.omnia.expanded .project-data > .clinical-report-anatomy,
    .work.omnia.expanded .project-data > .screen-dual-view {
        margin-block: var(--tablet-project-section-margin);
    }

    /* Soluciones */
    .soluciones-showcase .soluciones-hero {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        box-shadow: none;
    }

    .soluciones-showcase .soluciones-hero video {
        width: 100%;
        height: 100%;
        transform: none;
        object-fit: cover;
        object-position: center top;
    }

    .work.soluciones.expanded .project-data > .soluciones-filters {
        margin-block: var(--tablet-project-section-margin);
    }

    .soluciones-filters-stage {
        width: min(64%, 420px);
    }

    .soluciones-filters-annotations {
        inset: auto 0 auto;
        top: 100%;
        height: 110px;
    }

    .soluciones-filters-dimension--mark {
        left: 0;
        top: 10px;
        width: 39%;
    }

    .soluciones-filters-dimension--wordmark {
        left: 45%;
        top: 10px;
        width: 53%;
    }

    .soluciones-filters-callout--empresa,
    .soluciones-filters-callout--wordmark {
        top: 62px;
        bottom: auto;
        width: 44%;
        font-size: 9px;
        text-align: center;
        transform: none;
    }

    .soluciones-filters-callout--empresa {
        left: 0;
    }

    .soluciones-filters-callout--wordmark {
        right: 0;
        left: auto;
    }

    .soluciones-filters-callout--empresa::before,
    .soluciones-filters-callout--wordmark::before {
        display: block;
        left: 50%;
        top: auto;
        bottom: 100%;
        width: 1px;
        height: 54px;
        transform-origin: bottom;
    }

    .soluciones-filters-callout--empresa::after,
    .soluciones-filters-callout--wordmark::after {
        display: block;
        left: calc(50% - 2px);
        top: auto;
        bottom: calc(100% + 52px);
    }

    /* Ayunando: restore the compact dashboard grid with text-height header rows. */
    .work.ayunando.expanded .project-data > .ayunando-details {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: 42px minmax(58px, auto) repeat(4, minmax(72px, 1fr));
        grid-auto-rows: unset;
        gap: 8px;
        width: 100%;
        min-width: 0;
        height: min(64vh, 640px);
        min-height: 520px;
        overflow: hidden;
    }

    .ayunando-details-title {
        grid-column: 1 / 4;
        grid-row: 1;
        min-height: 0;
        padding: 0 8px;
        font-size: 16px;
        line-height: 1;
        white-space: nowrap;
    }

    .ayunando-details-content {
        grid-column: 1 / 4;
        grid-row: 2;
        min-height: 0;
        padding: 10px;
        font-size: 10px;
        line-height: 1.35;
        align-self: start;
    }

    .ayunando-details-item.item-01 {
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    .ayunando-details-item.item-02 {
        grid-column: 6 / 9;
        grid-row: 1 / 7;
    }

    .ayunando-details-item.item-03 {
        grid-column: 1 / 6;
        grid-row: 3 / 5;
    }

    .ayunando-details-item.item-04 {
        grid-column: 1 / 3;
        grid-row: 5 / 7;
    }

    .ayunando-details-item.item-05 {
        grid-column: 3 / 6;
        grid-row: 5 / 7;
    }

    .work.ayunando.expanded .project-data > .ayunando-process-timeline {
        margin-block: var(--tablet-project-section-margin);
    }

    .work.ayunando.expanded .project-data > div.ayunando-mockup {
        margin-bottom: 0;
    }

    .work.ayunando .ayunando-mockup-stage {
        height: 70vh;
        min-height: 70vh;
        aspect-ratio: var(--ayunando-hero-ratio, 986 / 2020);
        width: auto;
    }

    .work.ayunando .ayunando-hero {
        width: 100%;
        height: 100%;
    }

    .work.ayunando .ayunando-animations {
        top: 0;
        right: auto;
        bottom: 0;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }

    .work.ayunando .ayunando-animation--1 {
        top: 50%;
        right: calc(100% + clamp(12px, 1.8vw, 18px));
        bottom: auto;
        left: auto;
        width: auto;
        height: clamp(44px, 6vw, 54px);
        aspect-ratio: 301 / 111;
        transform: translateY(-50%);
    }

    .work.ayunando .ayunando-animation--2 {
        top: 50%;
        right: auto;
        bottom: auto;
        left: calc(100% + clamp(12px, 1.8vw, 18px));
        width: clamp(44px, 6vw, 54px);
        height: clamp(44px, 6vw, 54px);
        transform: translateY(-50%);
    }

    .work.ayunando .ayunando-animation--1 svg,
    .work.ayunando .ayunando-animation--2 svg {
        width: 100%;
        height: 100%;
    }

    .work.ayunando .ayunando-details-item.item-04 {
        padding: 8px;
    }

    .work.ayunando .ayunando-details-item.item-04 .ayunando-details-browser-chrome {
        min-height: 22px;
        padding: 6px 8px;
    }

    .work.ayunando .ayunando-details-item.item-04 .ayunando-details-browser-code {
        padding: 10px 8px;
        overflow: hidden;
        font-size: clamp(7px, 0.95vw, 8px);
        line-height: 1.45;
        white-space: pre-line;
    }

    .work.ayunando .ayunando-details-item.item-04 .ayunando-details-browser-comment {
        margin-bottom: 6px;
    }

    .work.ayunando .ayunando-process-timeline-step-title {
        grid-row: 1;
    }

    /* Other projects: simplify the sketch labels and reduce animated logos. */
    .work.others .others-project .others-project-gallery {
        height: 58vh;
        min-height: 0;
    }

    .work.others .others-project--lineup .others-project-gallery-mock--right {
        top: auto;
        right: auto;
        bottom: 9%;
        left: 50%;
    }

    .work.others .others-project--grupom .grupom-gallery-extra {
        height: 80%;
    }

    .work.others .others-project--grupom .others-project-gallery-mock--right {
        top: auto;
        right: -10%;
        bottom: 26%;
    }

    .work.others .others-project--multicem .others-project-gallery-mock--colors {
        top: auto;
        bottom: 10%;
        left: 0;
        right: auto;
        transform: none;
    }

    .work.others .others-project--multicem .others-project-gallery-mock--right {
        top: auto;
        right: -10%;
        left: auto;
        bottom: 40%;
    }

    .work.others .others-project-gallery-mock--sketch {
        font-size: 0;
        color: transparent;
    }

    .work.others .others-project--grupom .others-project-gallery-mock--right {
        width: min(37%, 250px);
        height: auto;
        padding: 18px;
    }

    .work.others .others-project--multicem .others-project-gallery-mock--right {
        width: min(38%, 250px);
        height: auto;
        padding: 16px;
    }

    /* Other projects: two balanced columns with titles below their rules. */
    .work.others .others-project-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 48px);
        width: 100%;
    }

    .work.others .others-project-details .project-data-about {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 0;
    }

    .work.others .others-project-details .line {
        position: relative;
        grid-row: 1;
        width: 100%;
        margin: 0 0 2px;
    }

    .work.others .others-project-details .project-data-about-title {
        grid-row: 2;
        font-size: 13px;
        font-weight: 600;
    }

    .work.others .others-project-details .project-data-about-text {
        grid-row: 3;
        font-size: 12px;
        line-height: 1.42;
    }
}

/* Omnia: keep the result label centered on the video's lower edge at every breakpoint. */
@media (max-width: 1180px) {
    .omnia-mockup {
        position: relative;
        isolation: isolate;
    }

    .omnia-mockup .omnia-frame-stack {
        position: relative;
        z-index: 2;
    }

    .omnia-mockup .omnia-frame-stack .omnia-frame-video,
    .omnia-mockup .omnia-frame-stack .omnia-frame-video:hover {
        transform: none !important;
        transition: none;
        z-index: 2;
    }

    .omnia-mockup .omnia-ghost-label.low {
        display: flex !important;
        position: absolute;
        inset: auto auto 0 50%;
        width: max-content;
        min-height: 0;
        margin: 0;
        transform: translate(-50%, 50%);
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        overflow: visible;
        z-index: 1;
    }
}

@media (min-width: 721px) and (max-width: 1180px) {
    .omnia-process .omnia-mockup {
        height: auto;
        align-self: center;
    }
}

/* Safari/iOS: use the logo alpha as a solid-white mask to avoid dark PNG edge halos. */
@media (max-width: 1180px) {
    .work.omnia.expanded .work-logo {
        background-color: #fff;
        -webkit-mask-image: url("./images/omnia/logo.png");
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url("./images/omnia/logo.png");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        opacity: 1;
        filter: none;
    }

    .work.omnia.expanded .work-logo .omnia-logo {
        opacity: 0;
        filter: none;
    }
}

/* Responsive corrections based on the media's real frame instead of viewport offsets. */
@media (min-width: 721px) and (max-width: 1180px) {
    .work.ayunando .ayunando-animation--2 {
        right: auto;
        left: 100%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 720px) {
    .soluciones-filters-logo {
        overflow: visible;
    }

    .soluciones-filters-logo-svg:not(.is-logo-revealed):not(.is-finale) {
        overflow: visible;
        filter: blur(2.5px);
        transition: filter 0.85s ease-out;
        will-change: filter;
    }

    .others-project--multicem .others-project-gallery {
        --multicem-logo-width: min(60vw, 264px);
        --multicem-logo-height: calc((var(--multicem-logo-width) - 24px) * 0.71435 + 24px);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        min-height: 0;
        padding-bottom: 0;
        gap: 0;
        overflow: visible;
    }

    .others-project--multicem .others-project-gallery-main--multicem {
        flex: 0 0 auto;
    }

    .others-project--multicem .others-project-gallery-mock--right {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        width: var(--multicem-logo-width);
        margin: 0 0 calc(var(--multicem-logo-height) * -0.5);
        align-self: center;
        transform: translateY(-50%);
    }

    .mobile-entry-media-modal-video {
        object-fit: contain;
    }
}