/* ==========================================================
   HOME · Servicios + proceso
   Dos componentes aislados, estables y preparados para media.
========================================================== */

.services-v2,
.process-v2 {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.services-v2-heading,
.process-v2-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: end;
    gap: clamp(34px, 6vw, 94px);
    margin-bottom: clamp(32px, 4vw, 50px);
}

.services-v2-heading .section-title,
.process-v2-heading .section-title {
    display: block;
    max-width: 850px;
    margin: 0;
    text-wrap: balance;
}

.services-v2-heading > p,
.process-v2-heading > p {
    max-width: 610px;
    margin: 0;
    font-size: clamp(.98rem, 1.2vw, 1.08rem);
    line-height: 1.72;
}

/* ----------------------------------------------------------
   Servicios
---------------------------------------------------------- */

.services-v2.section-padding {
    padding-block: clamp(72px, 7vw, 104px);
}

.services-v2 {
    color: #101a1f;
    background: linear-gradient(135deg, #fbf9f4 0%, #f3eee5 100%);
}

/* La decoración queda contenida únicamente en el lateral izquierdo. */
.services-v2::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(46vw, 720px);
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(251, 249, 244, .04) 0%, rgba(251, 249, 244, .13) 48%, #fbf9f4 100%),
        url('../assets/services-crescent-v7.webp') left center / cover no-repeat;
    opacity: .82;
    -webkit-mask-image: linear-gradient(to right, #000 0 52%, rgba(0, 0, 0, .56) 72%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0 52%, rgba(0, 0, 0, .56) 72%, transparent 100%);
}

.services-v2::after { display: none; }
.services-v2 .section-tag { color: #a63b27; }
.services-v2-heading .section-title { color: #101a1f; }
.services-v2-heading .section-title span { color: #c6482d; }
.services-v2-heading > p { color: #536068; }

.services-v3-shell {
    --services-block-size: 492px;
    display: grid;
    grid-template-columns: clamp(235px, 24vw, 320px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 24px);
    align-items: stretch;
}

/* El marco visual conserva siempre la misma proporción. En el futuro el JS
   puede cambiar sus fuentes mediante data-service-image/data-service-webp. */
.services-v3-art {
    position: relative;
    height: var(--services-block-size);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #ddd4c7;
    border: 1px solid rgba(17, 28, 34, .13);
    border-radius: 24px 7px 24px 24px;
    box-shadow: 0 24px 58px rgba(29, 34, 36, .12);
}

.services-v3-art picture,
.services-v3-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.services-v3-art img {
    object-fit: cover;
    object-position: var(--service-image-position, center 50%);
    transition: opacity .22s ease, transform .8s cubic-bezier(.22, .78, .24, 1);
}

.services-v3-art.is-changing img { opacity: .16; }
.services-v3-shell:hover .services-v3-art:not(.is-changing) img { transform: scale(1.02); }

.services-v3-art::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(7, 15, 19, .82), transparent 44%),
        linear-gradient(125deg, rgba(255, 250, 240, .1), transparent 47%);
}

.services-v3-art figcaption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.services-v3-art figcaption span {
    padding: 7px 9px;
    color: rgba(255, 249, 238, .84);
    background: rgba(7, 15, 20, .53);
    border: 1px solid rgba(255, 249, 238, .16);
    border-radius: 999px;
    backdrop-filter: blur(9px);
    font: 650 .59rem/1 var(--font-mono, monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.services-v2-carousel {
    display: grid;
    grid-template-rows: 92px minmax(0, 1fr);
    height: var(--services-block-size);
    min-width: 0;
    overflow: hidden;
    color: #fffaf0;
    background:
        radial-gradient(circle at 82% 8%, rgba(207, 72, 40, .15), transparent 32%),
        #0a141a;
    border: 1px solid rgba(190, 64, 37, .19);
    border-radius: 7px 24px 24px 24px;
    box-shadow: 0 26px 64px rgba(16, 23, 27, .15);
}

.services-v2-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    border-bottom: 1px solid rgba(253, 248, 239, .11);
}

.services-v2-tab {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 18px clamp(14px, 1.8vw, 24px);
    color: rgba(253, 248, 239, .57);
    text-align: left;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(253, 248, 239, .09);
    transition: color .22s ease, background-color .22s ease;
}

.services-v2-tab:last-child { border-right: 0; }

.services-v2-tab::before {
    content: '';
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    background: linear-gradient(90deg, #f17b3e, #bf3428);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.services-v2-tab:hover {
    color: rgba(253, 248, 239, .9);
    background: rgba(255, 255, 255, .025);
}

.services-v2-tab.is-active,
.services-v2-tab[aria-selected='true'] {
    color: #fffaf0;
    background: linear-gradient(180deg, rgba(213, 76, 42, .13), transparent);
}

.services-v2-tab.is-active::before,
.services-v2-tab[aria-selected='true']::before { transform: scaleX(1); }

.services-v2-tab-index {
    color: #f08349;
    font: 700 .7rem/1 var(--font-mono, monospace);
    letter-spacing: .1em;
}

.services-v2-tab strong,
.services-v2-tab small { display: block; }

.services-v2-tab strong {
    overflow: hidden;
    font: 650 clamp(.82rem, 1vw, .98rem)/1.22 var(--font-display, sans-serif);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.services-v2-tab small {
    margin-top: 5px;
    overflow: hidden;
    color: rgba(253, 248, 239, .46);
    font: 500 .63rem/1.25 var(--font-mono, monospace);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.services-v2-stage {
    --services-stage-size: 400px;
    position: relative;
    display: grid;
    height: var(--services-stage-size);
    min-width: 0;
    padding: 27px clamp(25px, 3.1vw, 42px) 61px;
    overflow: hidden;
}

.services-v2-stage.is-measuring {
    height: auto;
    min-height: 0;
    visibility: hidden;
}

.services-v2-panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(210px, .82fr);
    grid-template-areas:
        'top top'
        'copy list'
        'footer footer';
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(25px, 4vw, 62px);
    width: 100%;
    min-width: 0;
    height: 100%;
}

.services-v2-panel[hidden] { display: none !important; }
.services-v2-panel.is-active { animation: services-panel-in .24s ease-out both; }

@keyframes services-panel-in {
    from { opacity: .12; }
    to { opacity: 1; }
}

.services-v2-panel-topline {
    grid-area: top;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    color: #ed7944;
    border-bottom: 1px solid rgba(253, 248, 239, .11);
    font: 700 .67rem/1.2 var(--font-mono, monospace);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.services-v2-panel-copy {
    grid-area: copy;
    align-self: center;
    min-width: 0;
    padding-block: 22px 18px;
}

.services-v2-panel h3 {
    max-width: 720px;
    margin: 0 0 14px;
    color: #fffaf0;
    font: 650 clamp(1.48rem, 2.25vw, 2.35rem)/1.12 var(--font-display, sans-serif);
    letter-spacing: -.04em;
    text-wrap: balance;
}

.services-v2-panel-copy p {
    max-width: 670px;
    margin: 0;
    color: #b9c1c3;
    font-size: .93rem;
    line-height: 1.68;
}

.services-v2-deliverables {
    grid-area: list;
    align-self: center;
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 18px 0;
    list-style: none;
}

.services-v2-deliverables li {
    position: relative;
    padding-left: 20px;
    color: #e8e1d7;
    font-size: .86rem;
    line-height: 1.48;
}

.services-v2-deliverables li::before {
    content: '';
    position: absolute;
    top: .53em;
    left: 0;
    width: 8px;
    height: 8px;
    background: #ed7441;
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
}

.services-v3-panel-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding: 14px 176px 0 0;
    border-top: 1px solid rgba(253, 248, 239, .1);
}

.services-v2-meta {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: rgba(253, 248, 239, .49);
    font: 600 .66rem/1.35 var(--font-mono, monospace);
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.services-v3-panel-footer a {
    flex: 0 0 auto;
    color: #ff9b5d;
    font: 700 .68rem/1.3 var(--font-mono, monospace);
    text-decoration: none;
}

.services-v3-panel-footer a span {
    display: inline-block;
    margin-left: 4px;
    transition: transform .2s ease;
}

.services-v3-panel-footer a:hover span,
.services-v3-panel-footer a:focus-visible span { transform: translate(2px, -2px); }

.services-v2-controls {
    position: absolute;
    z-index: 3;
    right: clamp(25px, 3.1vw, 42px);
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.services-v2-arrow,
.process-v2-scene-nav button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #fffaf0;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(253, 248, 239, .22);
    border-radius: 50%;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.services-v2-arrow:hover,
.process-v2-scene-nav button:hover {
    color: #fff;
    background: #c4472e;
    border-color: #c4472e;
}

.services-v2-arrow svg,
.process-v2-scene-nav svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-v2-status {
    min-width: 43px;
    margin: 0;
    color: rgba(253, 248, 239, .59);
    text-align: center;
    font: 600 .67rem/1 var(--font-mono, monospace);
}

/* El soporte queda unido al servicio sin abrir otra sección extensa. */
.services-v2-evolution {
    display: grid;
    grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
    gap: clamp(28px, 4vw, 58px);
    margin-top: clamp(20px, 2.5vw, 30px);
    padding: clamp(25px, 3vw, 35px);
    color: #111b20;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(17, 28, 34, .11);
    border-left: 4px solid #c4472e;
    border-radius: 13px 20px 20px 13px;
    box-shadow: 0 14px 38px rgba(21, 28, 31, .06);
}

.services-v2-evolution header { align-self: start; }
.services-v2-evolution header .section-tag { margin-bottom: 8px; }

.services-v2-evolution h3 {
    max-width: 440px;
    margin: 0;
    color: #111b20;
    font: 650 clamp(1.55rem, 2.5vw, 2.45rem)/1.08 var(--font-display, sans-serif);
    letter-spacing: -.045em;
    text-wrap: balance;
}

.services-v2-evolution-copy > p {
    max-width: 790px;
    margin: 0 0 18px;
    color: #4d5a60;
    font-size: .96rem;
    line-height: 1.65;
}

.services-v2-evolution-copy ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-v2-evolution-copy li {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 12px;
    color: #344147;
    background: rgba(244, 239, 230, .8);
    border-radius: 9px;
    font-size: .8rem;
    line-height: 1.42;
}

.services-v2-evolution-copy li span {
    color: #ae3b29;
    font: 700 .65rem/1 var(--font-mono, monospace);
}

/* ----------------------------------------------------------
   Cómo trabajo · cinco escenas sobre un recorrido corto
---------------------------------------------------------- */

.process-v2.section-padding { padding-block: clamp(72px, 7vw, 102px); }

.process-v2 {
    overflow: visible;
    color: #fffaf0;
    background:
        radial-gradient(circle at 10% 14%, rgba(196, 71, 46, .13), transparent 27rem),
        linear-gradient(160deg, #081319, #050c10 75%);
}

.process-v2::before { display: none; }
.process-v2-heading .section-title span { color: #e96e3c; }
.process-v2-heading > p { color: #b9c1c3; }

.process-v2-story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(310px, .58fr);
    align-items: stretch;
    gap: clamp(30px, 4vw, 56px);
    min-height: 850px;
}

.process-v2-scene-column {
    position: relative;
    min-width: 0;
    height: 100%;
}

.process-v2-scene {
    position: relative;
    top: auto;
    min-width: 0;
    height: clamp(430px, 59vh, 575px);
    margin: 0;
    overflow: hidden;
    background: #101d22;
    border: 1px solid rgba(255, 247, 235, .16);
    border-radius: 24px;
    box-shadow: 0 32px 88px rgba(0, 0, 0, .31);
}

.process-v2-media,
.process-v2-picture,
.process-v2-picture img,
.process-v2-media > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.process-v2-media { overflow: hidden; background: #101d22; }
.process-v2-picture { z-index: 1; opacity: 0; transition: opacity .25s ease; }
.process-v2-picture.is-active { opacity: 1; }

.process-v2-picture img,
.process-v2-media > video {
    object-fit: cover;
    object-position: center;
}

.process-v2-picture img { transform: none; }

.process-v2-media > video {
    z-index: 2;
    opacity: 0;
    transition: opacity .25s ease;
}

.process-v2-media.has-video.is-video-ready > video { opacity: 1; }
.process-v2-media.has-video.is-video-ready .process-v2-picture { opacity: 0; }
.process-v2-media.has-video.is-video-seeking > video { opacity: 0; }
.process-v2-media.has-video.is-video-seeking .process-v2-picture.is-active { opacity: 1; }
.process-v2-media.has-video.is-video-static > video { display: none; }
.process-v2-media.has-video.is-video-static .process-v2-picture.is-active { opacity: 1; }
.process-v2-media.is-video-fallback > video { display: none; }
.process-v2-media.has-video.is-video-fallback .process-v2-picture.is-active { opacity: 1; }

.process-v2-media::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(4, 10, 14, .94), rgba(4, 10, 14, .13) 52%, rgba(4, 10, 14, .03)),
        linear-gradient(90deg, rgba(4, 10, 14, .16), transparent 52%);
}

.process-v3-scrub-hint {
    position: absolute;
    z-index: 5;
    top: 17px;
    right: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: rgba(255, 248, 237, .74);
    background: rgba(5, 12, 16, .5);
    border: 1px solid rgba(255, 248, 237, .15);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    font: 650 .6rem/1 var(--font-mono, monospace);
    letter-spacing: .055em;
    text-transform: uppercase;
}

.process-v3-scrub-hint span {
    width: 7px;
    height: 7px;
    background: #f07a3e;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(240, 122, 62, .13);
}

.process-v2-scene-caption {
    position: absolute;
    z-index: 4;
    right: clamp(24px, 3.5vw, 44px);
    bottom: clamp(25px, 3.5vw, 39px);
    left: clamp(24px, 3.5vw, 44px);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    pointer-events: none;
}

.process-v2-scene-caption > div:first-child { min-width: 0; }

.process-v2-scene-kicker {
    display: block;
    margin-bottom: 8px;
    color: #f18a59;
    font: 700 .7rem/1 var(--font-mono, monospace);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.process-v2-scene-caption h3 {
    margin: 0 0 9px;
    color: #fffaf0;
    font: 650 clamp(1.8rem, 3.1vw, 3rem)/1.03 var(--font-display, sans-serif);
    letter-spacing: -.045em;
}

.process-v2-scene-caption p {
    max-width: 650px;
    margin: 0;
    color: rgba(241, 240, 235, .82);
    font-size: clamp(.92rem, 1.15vw, 1.02rem);
    line-height: 1.6;
}

.process-v2-scene-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
    pointer-events: auto;
}

.process-v2-scene-nav button:disabled {
    opacity: .32;
    cursor: not-allowed;
}

.process-v2-scene-nav button:disabled:hover {
    color: #fffaf0;
    background: rgba(255, 255, 255, .02);
    border-color: rgba(253, 248, 239, .22);
}

.process-v2-progress {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: rgba(253, 248, 239, .1);
}

.process-v2-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #b83227, #f18a48);
    transform-origin: left;
    transition: width .15s linear;
}

.process-v2-steps {
    display: grid;
    align-content: stretch;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-v2-step,
.process-v2-step:last-child {
    display: block;
    min-height: 150px;
    overflow: hidden;
    opacity: .7;
    background: rgba(255, 250, 240, .025);
    border: 1px solid rgba(255, 248, 237, .11);
    border-radius: 14px;
    transform: none;
    transition: opacity .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease;
}

.process-v2-step.is-active,
.process-v2-step[aria-current='step'] {
    opacity: 1;
    background: linear-gradient(135deg, rgba(190, 61, 41, .42), rgba(190, 61, 41, .12));
    border-color: rgba(241, 128, 72, .58);
    transform: translateX(-7px);
}

.process-v3-step-button {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 17px;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 25px 23px;
    color: #fffaf0;
    text-align: left;
    background: transparent;
    border: 0;
}

.process-v2-step-index {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: rgba(255, 250, 240, .72);
    border: 1px solid rgba(255, 250, 240, .24);
    border-radius: 50%;
    font: 700 .68rem/1 var(--font-mono, monospace);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.process-v2-step.is-active .process-v2-step-index {
    color: #251711;
    background: #ffad69;
    border-color: #ffad69;
}

.process-v3-step-button strong,
.process-v3-step-button small { display: block; }

.process-v3-step-button strong {
    color: #fffaf0;
    font: 650 clamp(1rem, 1.25vw, 1.18rem)/1.25 var(--font-display, sans-serif);
}

.process-v3-step-button small {
    margin-top: 8px;
    color: rgba(255, 250, 240, .62);
    font: 500 .76rem/1.4 var(--font-mono, monospace);
}

.process-v2-step.is-active .process-v3-step-button small { color: rgba(255, 250, 240, .88); }
.process-v3-step-button:hover strong { color: #ffad69; }

.process-v2-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    margin-top: clamp(32px, 4vw, 48px);
    padding: clamp(26px, 3.5vw, 38px);
    background: linear-gradient(110deg, rgba(195, 66, 40, .18), rgba(255, 255, 255, .025) 65%);
    border: 1px solid rgba(239, 129, 80, .23);
    border-radius: 18px;
}

.process-v2-cta h3 {
    margin: 0 0 8px;
    color: #fffaf0;
    font: 650 clamp(1.25rem, 2vw, 1.72rem)/1.2 var(--font-display, sans-serif);
    letter-spacing: -.035em;
}

.process-v2-cta p { margin: 0; color: #b4bdc0; }
.process-v2-cta .btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width: 1100px) {
    .services-v3-shell { grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr); }
    .services-v2-panel { grid-template-columns: minmax(0, 1.1fr) minmax(190px, .9fr); column-gap: 28px; }
    .services-v2-evolution-copy ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-v2-story { grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 28px; }
    .process-v3-step-button { padding-inline: 18px; }
}

@media (max-width: 900px) {
    .services-v2-heading,
    .process-v2-heading { grid-template-columns: 1fr; gap: 18px; }

    .services-v2-heading > p,
    .process-v2-heading > p { max-width: 760px; }

    .services-v3-shell {
        --services-block-size: auto;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .services-v3-art {
        height: clamp(220px, 40vw, 310px);
        border-radius: 20px 20px 7px 7px;
    }

    .services-v3-art img { object-position: var(--service-image-position, center 52%); }

    .services-v2-carousel {
        height: auto;
        min-height: 500px;
        grid-template-rows: 88px minmax(0, 1fr);
        border-radius: 7px 7px 20px 20px;
    }

    .services-v2-stage { height: var(--services-stage-size, 412px); }

    .process-v2-story {
        display: block;
        min-height: 0;
    }

    .process-v2-scene-column { height: auto; }

    .process-v2-scene {
        position: relative;
        top: auto;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .process-v2-steps {
        display: flex;
        gap: 9px;
        margin-top: 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 1px 1px 8px;
        scroll-snap-type: inline mandatory;
        scrollbar-color: #bd432e rgba(255, 255, 255, .05);
    }

    .process-v2-step,
    .process-v2-step:last-child {
        flex: 0 0 175px;
        min-height: 92px;
        scroll-snap-align: start;
    }

    .process-v2-step.is-active,
    .process-v2-step[aria-current='step'] { transform: none; }

    .process-v3-step-button {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 11px;
        min-height: 92px;
        padding: 14px;
    }

    .process-v2-step-index { width: 33px; height: 33px; font-size: .59rem; }
    .process-v3-step-button strong { font-size: .9rem; }
    .process-v3-step-button small { margin-top: 4px; font-size: .62rem; }
}

@media (max-width: 1100px) {
    .services-v2-tab {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        padding-inline: 9px;
    }

    .services-v2-tab-index { font-size: .64rem; }
    .services-v2-meta { display: none; }
}

@media (max-width: 700px) {
    .services-v2.section-padding,
    .process-v2.section-padding { padding-block: 66px; }

    .services-v2::before { width: 66vw; opacity: .75; }

    .services-v2-tabs {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-color: #bd432e transparent;
    }

    .services-v2-tab {
        flex: 0 0 190px;
        scroll-snap-align: start;
    }

    .services-v2-stage { padding: 23px 19px 59px; }

    .services-v2-panel {
        grid-template-columns: 1fr;
        grid-template-areas: 'top' 'copy' 'list' 'footer';
        grid-template-rows: auto auto 1fr auto;
    }

    .services-v2-panel-copy { padding-block: 19px 7px; }
    .services-v2-panel h3 { font-size: clamp(1.42rem, 7vw, 2rem); }
    .services-v2-deliverables { align-self: start; gap: 8px; padding-block: 10px 14px; }
    .services-v3-panel-footer { align-items: flex-start; flex-direction: column; gap: 9px; padding: 12px 0 0; }
    .services-v2-controls { right: 18px; bottom: 12px; }
    .services-v2-meta { white-space: normal; }

    .services-v2-evolution { grid-template-columns: 1fr; gap: 20px; border-left-width: 3px; }
    .services-v2-evolution-copy ul { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
    .services-v2-evolution-copy li { flex: 0 0 180px; min-height: 78px; scroll-snap-align: start; }

    .process-v2-scene { aspect-ratio: 16 / 10; border-radius: 18px; }
    .process-v2-media::after {
        display: none;
    }
    .process-v2-scene-caption {
        padding: 26px 18px 16px;
        background: linear-gradient(to top, rgba(4, 10, 14, .88), rgba(4, 10, 14, .54) 58%, transparent);
        border-radius: 0 0 16px 16px;
    }
    .process-v2-scene-caption { right: 18px; bottom: 20px; left: 18px; gap: 16px; }
    .process-v2-scene-caption p { display: none; }
    .process-v2-scene-caption h3 { font-size: clamp(1.45rem, 8vw, 2rem); }
    .process-v3-scrub-hint { display: none; }
    .process-v2-cta { grid-template-columns: 1fr; gap: 20px; }
    .process-v2-cta .btn { justify-self: start; }
}

@media (max-width: 480px) {
    .services-v3-art { height: 205px; }
    .services-v2-carousel { grid-template-rows: 82px minmax(0, 1fr); }
    .services-v2-tab { flex-basis: 175px; padding-inline: 14px; }
    .services-v2-stage { --services-stage-size: 486px; }
    .services-v2-meta { display: none; }
    .services-v3-panel-footer { min-height: 39px; }
    .services-v2-panel-copy p { font-size: .88rem; line-height: 1.58; }
    .process-v2-scene-nav button { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .services-v3-art img,
    .services-v2-tab,
    .services-v2-tab::before,
    .services-v3-panel-footer a span,
    .process-v2-picture,
    .process-v2-media > video,
    .process-v2-progress span,
    .process-v2-step,
    .process-v2-step-index { transition: none; }

    .services-v2-panel.is-active { animation: none; }
}

/* ==========================================================
   HOME · refinamiento V9
   Servicios más compactos y proceso con ritmo perceptible.
========================================================== */

/* Servicios: menos altura sin convertir la escena en un recorte panorámico. */
.services-v2.section-padding {
    padding-block: clamp(54px, 5.2vw, 76px);
}

.services-v2-heading {
    gap: clamp(28px, 4.5vw, 70px);
    margin-bottom: clamp(22px, 2.7vw, 32px);
}

.services-v3-shell {
    grid-template-columns: minmax(0, 1.13fr) minmax(410px, .87fr);
    align-items: center;
    gap: clamp(14px, 1.7vw, 22px);
}

.services-v2-carousel {
    grid-template-rows: 76px minmax(0, 1fr);
}

.services-v2-tab {
    padding: 13px clamp(13px, 1.55vw, 20px);
}

.services-v2-tab small {
    margin-top: 3px;
}

.services-v2-stage {
    --services-stage-size: 326px;
    padding: 19px clamp(22px, 2.6vw, 34px) 52px;
}

.services-v2-panel-topline {
    padding-bottom: 10px;
}

.services-v2-panel-copy {
    padding-block: 13px 10px;
}

.services-v2-panel h3 {
    margin-bottom: 10px;
    font-size: clamp(1.34rem, 1.85vw, 1.95rem);
    line-height: 1.1;
}

.services-v2-panel-copy p {
    font-size: .88rem;
    line-height: 1.56;
}

.services-v2-deliverables {
    gap: 7px;
    padding-block: 10px;
}

.services-v2-deliverables li {
    font-size: .81rem;
    line-height: 1.38;
}

.services-v3-panel-footer {
    padding: 10px 158px 0 0;
}

.services-v3-art {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    align-self: center;
}

.services-v3-art picture,
.services-v3-art img {
    aspect-ratio: 16 / 10;
}

.services-v3-art img {
    object-fit: cover;
    object-position: var(--service-image-position, center center);
}

.services-v2-evolution {
    gap: clamp(22px, 3vw, 44px);
    margin-top: 13px;
    padding: clamp(17px, 2vw, 23px) clamp(21px, 2.6vw, 32px);
}

.services-v2-evolution h3 {
    font-size: clamp(1.38rem, 2vw, 2rem);
}

.services-v2-evolution-copy > p {
    margin-bottom: 11px;
    font-size: .89rem;
    line-height: 1.52;
}

.services-v2-evolution-copy li {
    padding-block: 3px;
    font-size: .76rem;
    line-height: 1.34;
}

/* Proceso: el dragón acompaña y no compite con el contenido. */
.process-v2-dragon {
    right: clamp(-118px, -7vw, -48px);
    width: min(39vw, 590px);
    opacity: .34;
    filter: grayscale(.9) contrast(1.02) brightness(.96);
    -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 19%, #000 76%, transparent 98%);
    mask-image: linear-gradient(to bottom, transparent 1%, #000 19%, #000 76%, transparent 98%);
}

.process-v2-story {
    --process-stage-height: clamp(470px, 60vh, 540px);
}

.process-v2-picture {
    transform: scale(1.012);
    transition: visibility 0s linear .68s, opacity .68s cubic-bezier(.22, .72, .25, 1), transform .68s ease;
}

.process-v2-picture.is-active {
    transform: scale(1);
    transition-delay: 0s;
}

.process-v2-picture img {
    transform: scale(1.045) translate3d(0, 0, 0);
    transition: none;
}

.process-v2-picture.is-active img {
    animation: process-v9-frame-life 5.4s cubic-bezier(.18, .65, .25, 1) both;
}

@keyframes process-v9-frame-life {
    from { transform: scale(1.045) translate3d(0, 0, 0); }
    to { transform: scale(1.008) translate3d(-.35%, -.25%, 0); }
}

.process-v2-scene.is-updating .process-v2-scene-kicker,
.process-v2-scene.is-updating .process-v2-scene-caption h3,
.process-v2-scene.is-updating .process-v2-scene-caption p {
    animation: process-v9-copy-in .58s cubic-bezier(.18, .74, .2, 1) both;
}

.process-v2-scene.is-updating .process-v2-scene-caption h3 { animation-delay: .045s; }
.process-v2-scene.is-updating .process-v2-scene-caption p { animation-delay: .09s; }

@keyframes process-v9-copy-in {
    from { opacity: 0; transform: translate3d(0, 15px, 0); filter: blur(4px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

.process-v2-progress span {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: none;
    will-change: transform;
}

.process-v2-step,
.process-v2-step:last-child {
    transition: opacity .32s ease, background-color .32s ease, border-color .32s ease, box-shadow .32s ease, transform .32s ease;
}

.process-v2-step.is-active,
.process-v2-step[aria-current='step'] {
    background: linear-gradient(105deg, rgba(205, 72, 43, .31), rgba(255, 250, 240, .045) 82%);
    border-color: rgba(255, 153, 91, .52);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .055);
    transform: translateX(-3px);
}

.process-v3-scrub-hint span {
    transition: background-color .25s ease, box-shadow .25s ease;
}

[data-process-playback='playing'] .process-v3-scrub-hint span {
    animation: process-v9-live-dot 1.5s ease-in-out infinite;
}

@keyframes process-v9-live-dot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(240, 122, 62, .09); }
    50% { box-shadow: 0 0 0 8px rgba(240, 122, 62, .17); }
}

@media (max-width: 1100px) {
    .services-v3-shell {
        grid-template-columns: minmax(0, 1.16fr) minmax(350px, .84fr);
    }
}

@media (max-width: 900px) {
    .services-v3-shell {
        grid-template-columns: 1fr;
    }

    .services-v2-carousel {
        grid-template-rows: 76px minmax(0, 1fr);
    }

    .services-v3-art {
        width: min(100%, 680px);
        justify-self: center;
    }

    .process-v2-step.is-active,
    .process-v2-step[aria-current='step'] {
        transform: none;
    }

    .process-v2-dragon {
        right: -32vw;
        width: 78vw;
        opacity: .18;
    }
}

@media (max-width: 700px) {
    .services-v2.section-padding {
        padding-block: 52px;
    }

    .services-v2-heading {
        margin-bottom: 22px;
    }

    .services-v2-stage {
        padding: 20px 19px 54px;
    }

    .services-v2-evolution {
        padding-block: 18px;
    }
}

html[data-motion='reduced'] .process-v2-picture.is-active img,
html[data-motion='reduced'] [data-process-playback='playing'] .process-v3-scrub-hint span {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .process-v2-picture.is-active img,
    [data-process-playback='playing'] .process-v3-scrub-hint span,
    .process-v2-scene.is-updating .process-v2-scene-kicker,
    .process-v2-scene.is-updating .process-v2-scene-caption h3,
    .process-v2-scene.is-updating .process-v2-scene-caption p {
        animation: none;
    }
}

html[data-motion='reduced'] .services-v3-art img,
html[data-motion='reduced'] .services-v2-tab,
html[data-motion='reduced'] .services-v2-tab::before,
html[data-motion='reduced'] .services-v3-panel-footer a span,
html[data-motion='reduced'] .process-v2-picture,
html[data-motion='reduced'] .process-v2-media > video,
html[data-motion='reduced'] .process-v2-progress span,
html[data-motion='reduced'] .process-v2-step,
html[data-motion='reduced'] .process-v2-step-index { transition: none; }

html[data-motion='reduced'] .services-v2-panel.is-active { animation: none; }

/* ==========================================================
   HOME · refinamiento premium V5
   Servicios invertidos y proceso convertido en una consola compacta.
========================================================== */

/* Servicios: contenido primero, escena después; jardín en semiluna a la izquierda. */
.services-v2::before {
    right: auto;
    left: 0;
    width: min(43vw, 720px);
    background:
        linear-gradient(90deg, rgba(251, 249, 244, .02), rgba(251, 249, 244, .12) 50%, #fbf9f4 100%),
        url('../assets/services-crescent-v7.webp') left center / cover no-repeat;
    opacity: .7;
    clip-path: ellipse(100% 68% at 0% 50%);
    -webkit-mask-image: linear-gradient(to right, #000 0 48%, rgba(0, 0, 0, .58) 70%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0 48%, rgba(0, 0, 0, .58) 70%, transparent 100%);
}

.services-v3-shell {
    grid-template-columns: minmax(0, 1.16fr) clamp(360px, 34vw, 470px);
    gap: clamp(12px, 1.4vw, 18px);
}

.services-v2-carousel {
    order: 1;
    border-color: rgba(207, 86, 47, .28);
    border-radius: 24px 7px 24px 24px;
    box-shadow: 0 30px 72px rgba(16, 23, 27, .18);
}

.services-v3-art {
    order: 2;
    border-color: rgba(166, 68, 39, .22);
    border-radius: 7px 24px 24px 24px;
    box-shadow: 0 30px 72px rgba(29, 34, 36, .14);
}

.services-v3-art::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 11px;
    pointer-events: none;
    border: 1px solid rgba(255, 247, 233, .22);
    border-radius: 2px 17px 17px 17px;
}

.services-v3-art img {
    object-position: var(--service-image-position, center 50%);
    transform: scale(1.012);
}

.services-v3-art.is-changing img { transform: scale(1.035); }
.services-v3-shell:hover .services-v3-art:not(.is-changing) img { transform: scale(1.025); }

.services-v2-evolution {
    position: relative;
    grid-template-columns: minmax(230px, .56fr) minmax(0, 1.44fr);
    margin-top: 16px;
    padding: clamp(22px, 2.5vw, 30px) clamp(24px, 3vw, 38px);
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(17, 28, 34, .12);
    border-left: 0;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(21, 28, 31, .045);
}

.services-v2-evolution::before {
    content: '';
    position: absolute;
    top: 0;
    right: 28px;
    left: 28px;
    height: 2px;
    background: linear-gradient(90deg, #c5482e, rgba(197, 72, 46, .22) 62%, transparent);
}

.services-v2-evolution-copy > p { margin-bottom: 15px; }

.services-v2-evolution-copy li {
    gap: 6px;
    padding: 5px 13px 5px 15px;
    background: transparent;
    border-left: 1px solid rgba(17, 28, 34, .15);
    border-radius: 0;
}

/* Cómo trabajo: vídeo y recorrido comparten una sola consola. */
.process-v2.section-padding {
    padding-top: clamp(56px, 5vw, 74px);
    padding-bottom: clamp(18px, 1.9vw, 28px);
}

.process-v2 {
    overflow: hidden;
}

.process-v2::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -42px;
    right: -6vw;
    display: block;
    width: min(64vw, 980px);
    height: min(47vw, 660px);
    pointer-events: none;
    background: url('../assets/process-white-dragon-v7.webp') right top / contain no-repeat;
    opacity: .13;
    filter: saturate(.7) contrast(1.04);
    -webkit-mask-image: radial-gradient(ellipse at 76% 34%, #000 0 42%, rgba(0, 0, 0, .56) 62%, transparent 78%);
    mask-image: radial-gradient(ellipse at 76% 34%, #000 0 42%, rgba(0, 0, 0, .56) 62%, transparent 78%);
    animation: process-v7-dragon-breathe 12s ease-in-out infinite alternate;
}

.process-v2 > .container {
    position: relative;
    z-index: 1;
}

@keyframes process-v7-dragon-breathe {
    from { transform: translate3d(0, -5px, 0) scale(1); }
    to { transform: translate3d(-14px, 8px, 0) scale(1.018); }
}

.process-v2-heading {
    gap: clamp(28px, 5vw, 76px);
    margin-bottom: clamp(24px, 2.8vw, 34px);
}

.process-v2-story {
    --process-stage-height: clamp(430px, 60vh, 525px);
    grid-template-columns: minmax(0, 1.58fr) minmax(270px, .42fr);
    gap: clamp(18px, 2.5vw, 34px);
    min-height: var(--process-stage-height);
}

.process-v2-scene {
    position: relative;
    top: auto;
    height: var(--process-stage-height);
    border-radius: 21px 6px 21px 21px;
    box-shadow: 0 30px 78px rgba(0, 0, 0, .3);
}

.process-v2-aside {
    position: relative;
    top: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--process-stage-height);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 250, 240, .045), rgba(255, 250, 240, .014)),
        rgba(8, 19, 25, .74);
    border: 1px solid rgba(255, 248, 237, .13);
    border-radius: 6px 21px 21px 21px;
    box-shadow: 0 24px 66px rgba(0, 0, 0, .18);
}

.process-v2-steps {
    position: relative;
    flex: 1 1 auto;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-content: stretch;
    gap: 0;
}

.process-v2-steps::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 15px;
    bottom: 15px;
    left: 27px;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(239, 126, 69, .36) 12% 88%, transparent);
}

.process-v2-step,
.process-v2-step:last-child {
    position: relative;
    min-height: 0;
    overflow: visible;
    opacity: .56;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 248, 237, .085);
    border-radius: 0;
}

.process-v2-step:last-child { border-bottom: 0; }

.process-v2-step::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 24px;
    width: 7px;
    height: 7px;
    background: #5f6262;
    border: 2px solid #101d22;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 248, 237, .2);
    transform: translateY(-50%);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.process-v2-step.is-active,
.process-v2-step[aria-current='step'] {
    opacity: 1;
    background: linear-gradient(90deg, rgba(190, 61, 41, .2), rgba(190, 61, 41, .035) 74%, transparent);
    border-color: rgba(241, 128, 72, .2);
    transform: none;
}

.process-v2-step.is-active::after,
.process-v2-step[aria-current='step']::after {
    background: #ff9a58;
    box-shadow: 0 0 0 5px rgba(240, 122, 62, .13), 0 0 18px rgba(240, 122, 62, .52);
    transform: translateY(-50%) scale(1.08);
}

.process-v3-step-button {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 9px 15px 9px 14px;
}

.process-v2-step-index {
    position: relative;
    z-index: 4;
    width: 28px;
    height: 28px;
    color: rgba(255, 250, 240, .52);
    background: #101d22;
    border-color: rgba(255, 250, 240, .16);
    font-size: .57rem;
}

.process-v2-step.is-active .process-v2-step-index {
    color: #fff4e7;
    background: #b8422d;
    border-color: #e57848;
}

.process-v3-step-button strong { font-size: clamp(.87rem, 1vw, 1rem); }
.process-v3-step-button small { margin-top: 3px; font-size: .62rem; }

.process-v2-aside .process-v2-cta {
    flex: 0 0 auto;
    display: block;
    margin: 0;
    padding: 14px 17px 16px;
    background: linear-gradient(110deg, rgba(195, 66, 40, .22), rgba(255, 255, 255, .025));
    border: 0;
    border-top: 1px solid rgba(239, 129, 80, .22);
    border-radius: 0;
}

.process-v2-aside .process-v2-cta h3 {
    margin-bottom: 4px;
    font-size: .93rem;
    letter-spacing: -.02em;
}

.process-v2-aside .process-v2-cta p {
    margin-bottom: 11px;
    font-size: .7rem;
    line-height: 1.42;
}

.process-v2-aside .process-v2-cta .btn {
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    font-size: .7rem;
}

@media (max-width: 1100px) {
    .services-v3-shell { grid-template-columns: minmax(0, 1.18fr) clamp(315px, 32vw, 390px); }
    .process-v2-story { grid-template-columns: minmax(0, 1.45fr) minmax(258px, .55fr); }
}

@media (max-width: 900px) {
    .services-v2::before { right: auto; left: 0; opacity: .54; }

    .services-v3-shell { grid-template-columns: 1fr; }

    .services-v2-carousel {
        order: 1;
        border-radius: 20px 20px 7px 7px;
    }

    .services-v3-art {
        order: 2;
        border-radius: 7px 7px 20px 20px;
    }

    .services-v3-art::before { border-radius: 2px 2px 15px 15px; }

    .process-v2::before {
        top: 0;
        right: -24vw;
        width: 112vw;
        height: 56vw;
        opacity: .08;
    }

    .process-v2-story { min-height: 0; }

    .process-v2-aside {
        position: relative;
        top: auto;
        display: block;
        height: auto;
        margin-top: 12px;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .process-v2-steps::before { display: none; }

    .process-v2-step,
    .process-v2-step:last-child {
        flex-basis: 170px;
        min-height: 88px;
        overflow: hidden;
        background: rgba(255, 250, 240, .025);
        border: 1px solid rgba(255, 248, 237, .11);
        border-radius: 12px;
    }

    .process-v2-step::after { display: none; }

    .process-v3-step-button {
        grid-template-columns: 32px minmax(0, 1fr);
        min-height: 88px;
        padding: 12px;
    }

    .process-v2-aside .process-v2-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        margin-top: 8px;
        padding: 17px 18px;
        border: 1px solid rgba(239, 129, 80, .2);
        border-radius: 14px;
    }

    .process-v2-aside .process-v2-cta p { margin-bottom: 0; }
    .process-v2-aside .process-v2-cta .btn { width: auto; }
}

@media (max-width: 700px) {
    .services-v2::before { width: 82vw; opacity: .48; }

    .services-v2-evolution {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-inline: 20px;
    }

    .services-v2-evolution-copy li { border-left-color: rgba(17, 28, 34, .17); }

    .process-v2-aside .process-v2-cta {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .process-v2-aside .process-v2-cta .btn { justify-self: start; }
}

html[data-motion='reduced'] .process-v2::before { animation: none; }

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

/* ==========================================================
   CÓMO TRABAJO · slider premium V8
   Cinco imágenes ligeras, navegación segmentada y dragón vertical.
========================================================== */

.process-v2.section-padding {
    padding-top: clamp(68px, 6.5vw, 96px);
    padding-bottom: clamp(62px, 6vw, 90px);
}

.process-v2 {
    overflow: clip;
}

/* El dragón anterior era horizontal y quedaba recortado por una máscara radial. */
.process-v2::before {
    content: none;
    display: none;
}

.process-v2-dragon {
    position: absolute;
    z-index: 0;
    top: 0;
    right: clamp(-92px, -5vw, -28px);
    display: block;
    width: min(43vw, 660px);
    height: 100%;
    margin: 0;
    pointer-events: none;
    opacity: .18;
    filter: grayscale(1) contrast(1.12) brightness(1.08);
    animation: process-v8-dragon-rise 16s ease-in-out infinite alternate;
}

.process-v2-dragon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

img.process-v2-dragon {
    object-fit: contain;
    object-position: right bottom;
}

@keyframes process-v8-dragon-rise {
    from { transform: translate3d(0, 6px, 0); }
    to { transform: translate3d(-5px, -8px, 0); }
}

.process-v2 > .container {
    position: relative;
    z-index: 1;
}

.process-v2-heading {
    margin-bottom: clamp(28px, 3.3vw, 42px);
}

.process-v2-story {
    --process-stage-height: clamp(470px, 62vh, 570px);
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(300px, .42fr);
    align-items: stretch;
    gap: clamp(16px, 2vw, 26px);
    min-height: 0;
}

.process-v2-scene-column,
.process-v2-scene {
    height: var(--process-stage-height);
}

.process-v2-scene {
    border-color: rgba(255, 247, 235, .18);
    border-radius: 22px 7px 22px 22px;
    box-shadow: 0 34px 86px rgba(0, 0, 0, .34);
}

/* El vídeo legado puede seguir temporalmente en el HTML, pero no participa. */
.process-v2-media > video {
    display: none;
}

.process-v2-picture {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear .45s, opacity .45s ease;
}

.process-v2-picture.is-active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.process-v2-picture img {
    transform: scale(1.018);
    transition: transform 1.1s cubic-bezier(.2, .65, .2, 1);
}

.process-v2-picture.is-active img {
    transform: scale(1);
}

.process-v2-scene-nav {
    align-items: center;
}

.process-v2-scene-nav button {
    position: relative;
    width: 38px;
    height: 38px;
    background: rgba(7, 16, 21, .58);
    border-color: rgba(255, 248, 237, .26);
    backdrop-filter: blur(10px);
}

.process-v2-scene-nav button:focus-visible,
.process-v3-step-button:focus-visible {
    outline: 2px solid #ff9a58;
    outline-offset: 3px;
}

.process-v2-scene-nav [data-process-toggle]::before {
    content: '';
    width: 8px;
    height: 13px;
    border-right: 3px solid currentColor;
    border-left: 3px solid currentColor;
}

.process-v2-scene-nav [data-process-toggle] svg {
    display: none;
}

.process-v2-scene-nav [data-process-toggle][aria-pressed='true']::before {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 7px solid transparent;
    border-right: 0;
    border-bottom: 7px solid transparent;
    border-left: 11px solid currentColor;
}

.process-v2-scene-nav [data-process-toggle]:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.process-v2-progress {
    height: 3px;
    background: rgba(253, 248, 239, .08);
}

.process-v2-aside {
    position: relative;
    top: auto;
    display: block;
    min-width: 0;
    height: var(--process-stage-height);
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(255, 250, 240, .055), rgba(255, 250, 240, .012)),
        rgba(7, 17, 22, .84);
    border: 1px solid rgba(255, 248, 237, .14);
    border-radius: 7px 22px 22px 22px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .2);
}

.process-v2-steps {
    position: relative;
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 10px;
}

/* Cada fase es una unidad: no hay línea ni puntos atravesando los títulos. */
.process-v2-steps::before,
.process-v2-step::after {
    content: none;
    display: none;
}

.process-v2-step,
.process-v2-step:last-child {
    position: relative;
    min-height: 0;
    overflow: hidden;
    opacity: .68;
    background: rgba(255, 250, 240, .022);
    border: 1px solid rgba(255, 248, 237, .09);
    border-radius: 12px;
    transform: none;
    transition: opacity .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.process-v2-step::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 10px auto 10px 0;
    width: 3px;
    background: linear-gradient(to bottom, #ffb16e, #c74730);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transform: scaleY(.45);
    transition: opacity .24s ease, transform .24s ease;
}

.process-v2-step.is-active,
.process-v2-step[aria-current='step'] {
    opacity: 1;
    background: linear-gradient(105deg, rgba(191, 66, 43, .25), rgba(255, 250, 240, .035) 78%);
    border-color: rgba(239, 128, 74, .34);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14), inset 0 1px rgba(255, 255, 255, .035);
    transform: none;
}

.process-v2-step.is-active::before,
.process-v2-step[aria-current='step']::before {
    opacity: 1;
    transform: scaleY(1);
}

.process-v3-step-button {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px 15px;
    border-radius: inherit;
}

.process-v2-step-index {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    color: rgba(255, 250, 240, .68);
    background: rgba(4, 12, 16, .56);
    border: 1px solid rgba(255, 250, 240, .16);
    border-radius: 10px;
    font-size: .62rem;
}

.process-v2-step.is-active .process-v2-step-index {
    color: #24150f;
    background: linear-gradient(145deg, #ffc080, #ee7545);
    border-color: #ffad69;
    box-shadow: 0 7px 20px rgba(226, 91, 49, .25);
}

.process-v3-step-button strong {
    font-size: clamp(.94rem, 1.08vw, 1.08rem);
    letter-spacing: -.015em;
}

.process-v3-step-button small {
    margin-top: 4px;
    color: rgba(255, 250, 240, .56);
    font-size: .66rem;
    line-height: 1.35;
}

.process-v3-step-button:hover strong {
    color: #ffad69;
}

.process-v2-story + .process-v2-cta {
    margin-top: 18px;
    padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 34px);
    background:
        linear-gradient(100deg, rgba(191, 66, 42, .2), rgba(255, 255, 255, .025) 62%),
        rgba(7, 17, 22, .7);
    border-color: rgba(239, 129, 80, .25);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .14);
}

@media (max-width: 1100px) {
    .process-v2-story {
        grid-template-columns: minmax(0, 1.42fr) minmax(278px, .58fr);
    }

    .process-v2-dragon {
        right: -13vw;
        width: 57vw;
        opacity: .13;
    }
}

@media (max-width: 900px) {
    .process-v2-story {
        display: block;
        min-height: 0;
    }

    .process-v2-scene-column,
    .process-v2-scene {
        height: auto;
    }

    .process-v2-scene {
        aspect-ratio: 16 / 9;
        border-radius: 20px 20px 7px 7px;
    }

    .process-v2-aside {
        height: auto;
        margin-top: 10px;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .process-v2-steps {
        display: flex;
        gap: 9px;
        height: auto;
        margin: 0;
        padding: 1px 1px 9px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-color: #bd432e rgba(255, 255, 255, .05);
    }

    .process-v2-step,
    .process-v2-step:last-child {
        flex: 0 0 180px;
        min-height: 92px;
        scroll-snap-align: center;
    }

    .process-v3-step-button {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 11px;
        min-height: 92px;
        padding: 12px;
    }

    .process-v2-step-index {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: .58rem;
    }

    .process-v2-dragon {
        top: 0;
        right: -30vw;
        width: 84vw;
        height: 58%;
        opacity: .075;
    }

    .process-v2-story + .process-v2-cta {
        margin-top: 10px;
    }
}

@media (max-width: 700px) {
    .process-v2.section-padding {
        padding-block: 66px;
    }

    .process-v2-dragon {
        display: none;
    }

    .process-v2-scene {
        aspect-ratio: 16 / 10;
        border-radius: 18px 18px 6px 6px;
    }

    .process-v2-scene-nav button {
        width: 35px;
        height: 35px;
    }

    .process-v2-story + .process-v2-cta {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

html[data-motion='reduced'] .process-v2-dragon,
html[data-motion='reduced'] .process-v2-picture img {
    animation: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .process-v2-dragon,
    .process-v2-picture,
    .process-v2-picture img,
    .process-v2-step,
    .process-v2-step::before {
        animation: none;
        transition: none;
    }
}

/* V9 · cierre de cascada. Mantener este bloque al final del componente. */
.services-v2.section-padding { padding-block: clamp(50px, 4.3vw, 62px); }

.services-v2-heading {
    gap: clamp(28px, 4.5vw, 70px);
    margin-bottom: clamp(18px, 2vw, 24px);
}

.services-v2-heading .section-title {
    font-size: clamp(2.25rem, 3.55vw, 3.55rem);
    line-height: 1.02;
}

.services-v3-shell {
    grid-template-columns: minmax(0, 1.13fr) minmax(410px, .87fr);
    align-items: center;
    gap: clamp(14px, 1.7vw, 22px);
}

.services-v2-carousel { grid-template-rows: 76px minmax(0, 1fr); }
.services-v2-tab { padding: 13px clamp(13px, 1.55vw, 20px); }
.services-v2-tab small { margin-top: 3px; }

.services-v2-stage {
    --services-stage-size: 344px;
    padding: 21px clamp(22px, 2.6vw, 34px) 54px;
}

.services-v2-panel-topline {
    padding-bottom: 12px;
    font-size: .69rem;
}

.services-v2-panel-copy { padding-block: 16px 12px; }

.services-v2-panel h3 {
    margin-bottom: 12px;
    font-size: clamp(1.44rem, 1.95vw, 2.08rem);
    line-height: 1.12;
}

.services-v2-panel-copy p {
    font-size: .93rem;
    line-height: 1.62;
}

.services-v2-deliverables { gap: 8px; padding-block: 12px; }

.services-v2-deliverables li {
    font-size: .85rem;
    line-height: 1.44;
}

.services-v3-panel-footer { padding: 12px 158px 0 0; }

.services-v2-meta {
    font-size: .7rem;
    line-height: 1.42;
}

.services-v3-panel-footer a {
    font-size: .74rem;
    line-height: 1.38;
}

.services-v3-art {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    align-self: center;
}

.services-v3-art picture,
.services-v3-art img { aspect-ratio: 16 / 10; }

.services-v3-art img {
    object-fit: cover;
    object-position: var(--service-image-position, center center);
}

.services-v2-evolution {
    gap: clamp(22px, 3vw, 44px);
    margin-top: 10px;
    padding: clamp(15px, 1.6vw, 19px) clamp(21px, 2.6vw, 32px);
}

.services-v2-evolution h3 { font-size: clamp(1.38rem, 2vw, 2rem); }

.services-v2-evolution-copy > p {
    margin-bottom: 11px;
    font-size: .89rem;
    line-height: 1.52;
}

.services-v2-evolution-copy li {
    padding-block: 3px;
    font-size: .76rem;
    line-height: 1.34;
}

.process-v2-dragon {
    right: clamp(-118px, -7vw, -48px);
    width: min(39vw, 590px);
    opacity: .075;
    filter: grayscale(1) contrast(.9) brightness(.9);
    -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 19%, #000 76%, transparent 98%);
    mask-image: linear-gradient(to bottom, transparent 1%, #000 19%, #000 76%, transparent 98%);
}

.process-v2-story { --process-stage-height: clamp(470px, 60vh, 540px); }

.process-v2-picture {
    transform: scale(1.012);
    transition: visibility 0s linear .68s, opacity .68s cubic-bezier(.22, .72, .25, 1), transform .68s ease;
}

.process-v2-picture.is-active {
    transform: scale(1);
    transition-delay: 0s;
}

.process-v2-picture img {
    transform: scale(1.045) translate3d(0, 0, 0);
    transition: none;
}

.process-v2-picture.is-active img {
    animation: process-v9-frame-life 5.4s cubic-bezier(.18, .65, .25, 1) both;
}

.process-v2-progress span {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: none;
    will-change: transform;
}

.process-v2-step.is-active,
.process-v2-step[aria-current='step'] {
    background: linear-gradient(105deg, rgba(205, 72, 43, .31), rgba(255, 250, 240, .045) 82%);
    border-color: rgba(255, 153, 91, .52);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .055);
    transform: translateX(-3px);
}

@media (max-width: 1100px) {
    .services-v3-shell { grid-template-columns: minmax(0, 1.16fr) minmax(350px, .84fr); }
}

@media (max-width: 900px) {
    .services-v3-shell { grid-template-columns: 1fr; }
    .services-v2-carousel {
        min-height: 0;
        grid-template-rows: 76px minmax(0, 1fr);
    }

    .services-v3-art {
        width: min(100%, 680px);
        justify-self: center;
    }

    .process-v2-step.is-active,
    .process-v2-step[aria-current='step'] { transform: none; }

    .process-v2-dragon {
        right: -32vw;
        width: 78vw;
        opacity: .04;
    }
}

@media (max-width: 700px) {
    .services-v2.section-padding { padding-block: 52px; }
    .services-v2-heading { margin-bottom: 22px; }
    .services-v2-stage { padding: 21px 19px 56px; }
    .services-v2-evolution { padding-block: 18px; }
}

/* El proceso conserva una escena amplia, pero elimina aire ornamental. */
.process-v2.section-padding {
    padding-top: clamp(56px, 5vw, 70px);
    padding-bottom: clamp(44px, 4.5vw, 62px);
}

.process-v2-heading { margin-bottom: clamp(22px, 2.4vw, 30px); }

.process-v2-story + .process-v2-cta {
    margin-top: 14px;
    padding-block: clamp(17px, 1.8vw, 22px);
}

/* El asset V9 ya nace con poco contraste; se muestra como tinta de fondo. */
.process-v2 > .process-v2-dragon {
    opacity: .16;
    filter: grayscale(.9) contrast(1.02) brightness(.96);
}

@media (max-width: 900px) {
    .process-v2 > .process-v2-dragon { opacity: .09; }
}

@media (prefers-reduced-motion: reduce) {
    .process-v2-picture.is-active img {
        animation: none !important;
        transform: none !important;
    }
}

/* ========================================================================== 
   RESPONSIVE V19 · lectura compacta sin contenido oculto
   ========================================================================== */

.services-v2 :is(.services-v2-heading, .services-v3-shell, .services-v2-carousel, .services-v2-stage, .services-v2-panel, .services-v2-panel-copy, .services-v3-panel-footer),
.process-v2 :is(.process-v2-heading, .process-v2-story, .process-v2-scene, .process-v2-scene-caption, .process-v2-aside) {
    min-width: 0;
}

.services-v2 :is(h2, h3, p, li, a, strong, small),
.process-v2 :is(h2, h3, p, li, strong, small) {
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .services-v3-art {
        width: min(100%, 480px);
        max-width: 480px;
        justify-self: center;
    }

    .services-v3-art,
    .services-v3-art picture,
    .services-v3-art img { aspect-ratio: 16 / 10; }
}

@media (max-width: 700px) {
    .services-v3-panel-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 12px 0 0;
    }

    .services-v2-evolution-copy ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    .services-v2-evolution-copy li {
        min-width: 0;
        min-height: 64px;
        padding: 10px;
        overflow-wrap: anywhere;
        scroll-snap-align: none;
    }

    .process-v2-heading > p { max-width: 58ch; }
}

@media (max-width: 430px) {
    .services-v2-heading .section-title,
    .process-v2-heading .section-title {
        font-size: clamp(2rem, 10.5vw, 2.7rem);
        line-height: 1.04;
    }

    .services-v2-stage { padding-inline: 16px; }
    .services-v2-tab { flex-basis: 190px; }
    .services-v2-panel h3 { font-size: clamp(1.32rem, 6.6vw, 1.72rem); }
    .services-v2-panel-copy p { line-height: 1.52; }

    .services-v2-evolution-copy ul { grid-template-columns: 1fr; }
    .services-v2-evolution-copy li { min-height: 0; }

    .process-v2-scene { aspect-ratio: 4 / 3; }

    .process-v2-scene-caption {
        right: 12px;
        bottom: 14px;
        left: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: end;
        gap: 9px;
        padding: 24px 12px 12px;
    }

    .process-v2-scene-caption > div:first-child { width: 100%; }
    .process-v2-scene-caption h3 { max-width: 100%; font-size: 1.72rem; }
    .process-v2-scene-nav { justify-self: start; }
    .process-v2-steps { scroll-padding-inline: 1px; }
    .process-v2-step,
    .process-v2-step:last-child { flex-basis: min(78vw, 238px); }
}

@media (max-width: 350px) {
    .services-v2-panel h3 { font-size: 1.28rem; }
    .process-v2-scene-caption { bottom: 10px; }
    .process-v2-scene-caption h3 { font-size: 1.55rem; }
}

/* Cierre de cascada V19: los componentes anteriores redefinen estas medidas. */
@media (max-width: 1100px) {
    .services-v2-tab {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        padding-inline: 9px;
    }

    .services-v2-tab-index { font-size: .64rem; }
    .services-v2-meta { display: none; }
}

@media (max-width: 700px) {
    .services-v2-tab { flex-basis: 190px; }
}

/* ========================================================================== 
   CONTROLES DE PROCESO V20 · bucle continuo y contraste sobre cualquier frame
   ========================================================================== */
.process-v2-scene-nav {
    display: inline-grid;
    grid-template-columns: repeat(3, 40px);
    gap: 3px;
    padding: 4px;
    background: rgba(4, 11, 15, .78);
    border: 1px solid rgba(255, 243, 220, .2);
    border-radius: 14px 5px 14px 5px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px) saturate(120%);
}

.process-v2-scene-nav button,
.process-v2-scene-nav button:disabled {
    width: 40px;
    height: 40px;
    color: #fff3dc;
    opacity: 1;
    background: transparent;
    border: 0;
    border-radius: 10px 3px 10px 3px;
    box-shadow: none;
    transform: none;
    transition: color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}

.process-v2-scene-nav button:hover,
.process-v2-scene-nav button:disabled:hover {
    color: #10191d;
    background: #fff3dc;
    box-shadow: 0 7px 17px rgba(0, 0, 0, .22);
    transform: translateY(-1px);
}

.process-v2-scene-nav [data-process-toggle] {
    color: #fff8eb;
    background: linear-gradient(145deg, #d65032, #9f3228);
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 6px 18px rgba(165, 48, 35, .3);
}

.process-v2-scene-nav [data-process-toggle]:hover {
    color: #1b120e;
    background: linear-gradient(145deg, #ffc18c, #f28a52);
}

.process-v2-scene-nav svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

@media (max-width: 430px) {
    .process-v2-scene-nav {
        grid-template-columns: repeat(3, 36px);
    }

    .process-v2-scene-nav button,
    .process-v2-scene-nav button:disabled {
        width: 36px;
        height: 36px;
    }
}