/* ==========================================================================
   Arrieta Agency — Landing (réplica estática del diseño Figma)
   Paleta y tipografía tomadas del archivo de Figma.
   ========================================================================== */

@font-face {
    font-family: "Gellaby";
    src:
        url("../fonts/gellaby.otf") format("opentype"),
        url("../fonts/gellaby.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Grifter";
    src: url("../fonts/grifter-bold.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colores del design system */
    --c-dark: #181934;
    --c-blue: #352fda;
    --c-red: #ff2e2e;
    --c-yellow: #ffcf03;
    --c-green: #37c366;
    --c-purple: #7a34ca;
    --c-page: #030319;
    --c-cyan: #00e5ff;
    --c-lavender: #8c7de2;
    --c-light: #ebebeb;

    /* Tipografía: Gellaby (display) + Montserrat (cuerpo) */
    --font-display: "Gellaby", system-ui, sans-serif;
    --font-fun: "Gellaby", system-ui, sans-serif;
    --font-body: "Montserrat", system-ui, sans-serif;
    --font-Caps: "Grifter", system-ui, sans-serif;

    --maxw: 1280px;
    --nav-h: 96px;
    --noise-opacity: .6;
    --mesh-max-w: 1920px;
}

/* Granulado solo sobre el mesh (Figma: Noise · 60% · Multiply) */
.page-mesh__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--noise-opacity);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--c-dark);
    background: var(--c-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { display: block; }

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

/* ---- Shell + mesh superior (Figma bg1 @ Hero→Proceso) -------------------- */
.page-shell {
    position: relative;
    background: var(--c-page);
    overflow-x: clip;
}

.page-shell > :not(.page-mesh):not(.site-nav) {
    position: relative;
    z-index: 1;
}

/* bg1 solo detrás del tramo superior; el band-lower tapa desde Marcas */
.page-mesh {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--mesh-max-w), 100vw);
    /* Cubre hasta Proceso; el band-lower empieza después y lleva su propio fondo */
    bottom: auto;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
}

.page-mesh__slice {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    object-fit: cover;
    object-position: center top;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---- Encabezados de sección (palabra normal + palabra "fun") -------------- */
.section-title {
    font-family: var(--font-Caps);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    text-align: center;
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
}
.section-title .fun {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ---- Botones -------------------------------------------------------------- */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-yellow);
    color: var(--c-dark);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    height: 40px;
    padding: 0 34px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Botones de país (pill con borde) */
.country-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 214px;
    height: 48px;
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, .02);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}
.country-btn .flag { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.country-btn .label { flex: 1 1 auto; text-align: center; }
.country-btn .arrow { width: 22px; height: 22px; flex: 0 0 auto; }
.country-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .07); }
.country-btn.on-dark { color: #fff; }
.country-btn.on-dark .arrow { filter: brightness(0) invert(1); }
.country-btn.on-light { color: var(--c-dark); }

.country-row {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
}
.site-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav-logo {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 168px;
}
.nav-logo img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 56px);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}
.nav-links a { white-space: nowrap; transition: color .15s ease; }
.nav-links a:hover { color: var(--c-yellow); }
.nav-toggle { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    /* Una sola pantalla: no debe asomar la sección siguiente */
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
}
.hero__inner {
    position: relative;
    z-index: 3;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: var(--nav-h) 24px clamp(24px, 4vh, 48px);
    gap: clamp(12px, 1.8vh, 18px);
}
.hero__mark { width: 74px; margin: 22px 0 40px; }
.hero__brand {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__intro {
    display: block;
    width: clamp(240px, 34vw, 420px);
    height: auto;
    max-height: min(42vh, 360px);
    object-fit: contain;
    opacity: 1;
    visibility: visible;
    transition: opacity .6s var(--ease-out), visibility .6s var(--ease-out);
}
.hero__intro.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.hero__smile {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(88px, 10vw, 118px);
    height: auto;
    opacity: 0;
    transition: opacity .7s var(--ease-out);
}
.hero__smile.is-visible {
    opacity: 1;
}
.hero__headline {
    font-family: var(--font-body);
    color: #fff;
    font-size: clamp(20px, 2.8vw, 32px);
    line-height: 1.15;
    letter-spacing: .01em;
    margin: 0;
    max-width: 900px;
    flex-shrink: 0;
}
.hero__headline .top { font-weight: 600; }
.hero__headline .bottom { font-weight: 700; text-transform: uppercase; }
.hero__cta {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.hero__cta .lead {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    font-size: 20px;
    margin: 0;
}

/* Decoración hero — cintas, elipses y semicírculos del diseño original */
.hero .decor { position: absolute; z-index: 1; pointer-events: none; height: auto; }
/* Cinta blanca izquierda */
.hero .decor--curl-l { 
    left: -21%;
    top: 21%;
    width: min(846px, 47vw);
    opacity: .32;
    rotate: 317deg;
}
/* Cinta blanca derecha */
.hero .decor--curl-r {
    right: -15%;
    top: -2%;
    width: min(384px, 34vw);
    opacity: .32;
    rotate: 274deg;
    transform: rotateX(180deg);
}

/* Hexágono lila: mitad izquierda, zona baja */
.hero .decor--hexagon { left: 7%; bottom: 18%; top: auto; width: min(131px, 14vw); opacity: .92; }
/* Elipses cian apiladas: esquina superior derecha */
.hero .decor--quote { 
    right: -8.5%;
    top: 77%;
    width: min(204px, 17vw);
    opacity: .95;
}

/* Semicírculos periwinkle junto a las elipses */
.hero .decor--periwinkle-a {
    right: 11%;
    top: 31%;
    width: min(60px, 5.5vw);
    opacity: .92;
}
.hero .decor--periwinkle-b {
    right: 6%;
    top: 26%;
    width: min(60px, 5.5vw);
    opacity: .92;
 }

/* Botón volver arriba — fijo, esquina inferior derecha */
.scroll-top {
    position: fixed;
    right: 3.5%;
    bottom: clamp(20px, 4vh, 44px);
    z-index: 1001;
    width: min(108px, 12vw);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility .25s ease, transform .2s ease;
}
.scroll-top.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.scroll-top img {
    display: block;
    width: 100%;
    max-width: 108px;
    height: auto;
}

/* ==========================================================================
   ¡HOLA! (intro + fotos del equipo)
   ========================================================================== */
.hola {
    position: relative;
    background: transparent;
    padding: 90px 0 120px;
    overflow: hidden;
}
.hola__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}
.hola__title {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: clamp(42px, 4.8vw, 56px);
    line-height: 1;
    margin: 0 0 26px;
}
.hola__text p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--c-dark);
    margin: 0 0 18px;
    max-width: 620px;
}
/* Composición Figma Frame 23 (1020 × 1278) */
.hola__people {
    position: relative;
    align-self: end;
    width: 100%;
    aspect-ratio: 1020 / 1278;
    min-height: clamp(560px, 52vw, 820px);
}
.hola__people .ginsa,
.hola__people .hernedy {
    position: absolute;
    top: 10.2%;
    width: 84.8%;
    height: auto;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)) drop-shadow(0 8px 12px rgba(0, 0, 0, .15));
}
.hola__people .ginsa { left: 16%; z-index: 3; }
.hola__people .hernedy { left: 28.4%; z-index: 2; }

/* curl amarillo (curl 4) — detrás de las personas */
.hola__people .hola__curl {
    position: absolute;
    right: -2.9%;
    top: 0.3%;
    width: 543px;
    z-index: 1;
    opacity: .95;
    pointer-events: none;
    rotate : -166deg;
    transform-origin: center;
}
/* curl naranja (curl 3) — curva lateral derecha */
.hola__people .hola__curl--orange {
    position: absolute;
    right: -59.6%;
    top: 23.9%;
    width: 174.7%;
    z-index: 1;
    pointer-events: none;
    transform: rotate(57deg);
    transform-origin: center;
}
/* estallido rojo entre las dos personas */
.hola__people .hola__burst {
    position: absolute;
    left: 52.1%;
    top: 30.4%;
    width: 22.8%;
    z-index: 3;
    pointer-events: none;
}
/* onda morada fluida bajo las fotos */
.hola__people .hola__wave {
    position: absolute;
    left: 0%;
    bottom: -27px;
    width: 113%;
    height: auto;
    z-index: 5;
    rotate: 353deg;
    pointer-events: none;
}

/* Tablet / móvil: texto arriba, fotos abajo (como Figma móvil) */
@media (max-width: 1024px) {
    .hola {
        padding-top: max(72px, calc(var(--nav-h) + 24px));
        padding-bottom: 80px;
    }
    .hola__grid {
        grid-template-columns: 1fr;
        gap: clamp(20px, 4vw, 36px);
    }
    .hola__content { order: 1; }
    .hola__people {
        order: 2;
        align-self: center;
        width: min(100%, 520px);
        margin-inline: auto;
        min-height: clamp(340px, 72vw, 480px);
        aspect-ratio: 1020 / 1278;
    }
    .hola__title {
        font-size: clamp(36px, 8vw, 48px);
        margin-bottom: 20px;
    }
    .hola__text p {
        font-size: clamp(16px, 3.8vw, 18px);
        max-width: none;
    }
    .hola__people .ginsa,
    .hola__people .hernedy {
        top: 8%;
        width: 76%;
    }
    .hola__people .ginsa { left: 6%; }
    .hola__people .hernedy { left: 20%; }
    .hola__people .hola__curl {
        width: 58%;
        right: -2%;
        top: 2%;
        rotate: -166deg;
    }
    .hola__people .hola__burst {
        left: 40%;
        top: 28%;
        width: 20%;
    }
    .hola__people .hola__wave {
        left: -4%;
        bottom: 0;
        width: 108%;
        rotate: 0deg;
    }
}

/* ==========================================================================
   ¿QUÉ HACEMOS? — stickers + tags (Figma 2097:3318)
   ========================================================================== */
.servicios {
    position: relative;
    z-index: 2;
    padding: 80px 0 70px;
    background: transparent;
    overflow-x: clip;
    overflow-y: visible;
}
/*
 * Cúpula navy más circular (arco pronunciado al centro) + rosa/cyan pegados a ella.
 */
.servicios__fade {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: 100vw;
    height: min(82%, 960px);
    transform: translateX(-50%);
    pointer-events: none;
    background: #01001B;
    /* Elipse menos ancha → cúpula más redonda / pico central más alto */
    -webkit-mask-image: radial-gradient(
        ellipse 100% 108% at 50% 108%,
        #000 0%,
        #000 36%,
        rgba(0, 0, 0, .94) 48%,
        rgba(0, 0, 0, .6) 60%,
        rgba(0, 0, 0, .22) 70%,
        transparent 80%
    );
    mask-image: radial-gradient(
        ellipse 100% 108% at 50% 108%,
        #000 0%,
        #000 36%,
        rgba(0, 0, 0, .94) 48%,
        rgba(0, 0, 0, .6) 60%,
        rgba(0, 0, 0, .22) 70%,
        transparent 80%
    );
}
.servicios__fade::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 95% 100% at 50% 105%,
            #01001B 0%,
            #0D0033 32%,
            rgba(45, 20, 90, .7) 52%,
            rgba(100, 70, 175, .28) 64%,
            transparent 78%
        );
    filter: blur(18px);
    pointer-events: none;
}
.servicios__fade::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 48%;
    transform: translateX(-50%);
    background:
        radial-gradient(
            ellipse 130% 110% at 50% 115%,
            #01001B 0%,
            #01001B 55%,
            transparent 78%
        );
    pointer-events: none;
}
/* Rosa / cyan: anclados a la cúpula (bottom), se tocan al centro */
.servicios__glow {
    position: absolute;
    z-index: 1;
    width: min(72vw, 960px);
    height: min(52%, 640px);
    bottom: 26%;
    top: auto;
    pointer-events: none;
    filter: blur(52px);
    mix-blend-mode: screen;
}
.servicios__glow--pink {
    left: -8%;
    background: radial-gradient(
        ellipse 85% 80% at 28% 58%,
        rgba(255, 140, 210, .88) 0%,
        rgba(230, 100, 190, .52) 34%,
        rgba(180, 80, 170, .22) 55%,
        transparent 72%
    );
}
.servicios__glow--cyan {
    right: -8%;
    left: auto;
    background: radial-gradient(
        ellipse 85% 80% at 72% 55%,
        rgba(140, 235, 255, .82) 0%,
        rgba(90, 210, 240, .5) 36%,
        rgba(70, 170, 220, .2) 56%,
        transparent 72%
    );
}
.servicios__glow--pink::after,
.servicios__glow--cyan::after {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 10%;
    width: 48%;
    filter: blur(36px);
    pointer-events: none;
}
.servicios__glow--pink::after {
    right: -22%;
    background: radial-gradient(
        ellipse at 75% 55%,
        rgba(220, 150, 230, .4) 0%,
        transparent 72%
    );
}
.servicios__glow--cyan::after {
    left: -22%;
    background: radial-gradient(
        ellipse at 25% 50%,
        rgba(160, 210, 245, .36) 0%,
        transparent 72%
    );
}
.servicios .container,
.servicios__board,
.servicios__portfolio {
    position: relative;
    z-index: 2;
}
.servicios__title { color: var(--c-dark); margin-bottom: 28px; }

.servicios__board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) minmax(0, 1fr);
    gap: clamp(8px, 2vw, 28px);
    align-items: stretch;
    max-width: 1180px;
    margin: 110px auto 28px;
    min-height: min(920px, 92vh);
}

.servicios__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 2;
}
.servicios__col--left {
    align-items: flex-end;
    text-align: right;
    padding-top: 200px;
}
.servicios__col--right {
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
    padding-block: 2% 4%;
}
.servicios__col-group {
    display: flex;
    margin-left: -4%;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.servicios__col-group--bot { margin-top: auto; padding-bottom: 58%; margin-left: -20%;}

.servicios__tag {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.25;
    color: var(--c-dark);
    padding: 6px 10px;
    border-radius: 30px;
    cursor: default;
    transform-origin: center;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
    max-width: 28ch;
}
.servicios__col--left .servicios__tag { transform-origin: right center; }
.servicios__col--right .servicios__tag { transform-origin: left center; }
.servicios__tag--wrap { max-width: 26ch; }
.servicios__tag--light { color: #fff; }
.servicios__tag:hover,
.servicios__tag:focus-visible {
    transform: scale(1.08);
}

/* Sangrías: siguen la silueta de los stickers (no lista alineada) */
.servicios__tag--l1 { margin-right: -6px; }
.servicios__tag--l2 { margin-right: 34px; }
.servicios__tag--l3 { margin-right: 52px; }
.servicios__tag--l4 { margin-right: 10px; }

.servicios__tag--r1 { margin-left: 10px; }
.servicios__tag--r2 { margin-left: -4px; }

.servicios__tag--b1 { margin-left: 2px; }
.servicios__tag--b2 { margin-left: 16px; }
.servicios__tag--b3 { margin-left: 54px; }
.servicios__tag--b4 { margin-left: 62px; }
.servicios__tag--b5 { margin-left: 24px; }

/* Stack central de stickers + acentos (formas SVG + texto) */
.servicios__stack {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    aspect-ratio: 460 / 820;
    z-index: 1;
    overflow: visible;
}

.servicios__sticker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
}
.servicios__shape {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}
.servicios__icon {
    position: absolute;
    pointer-events: none;
    user-select: none;
}
.servicios__label {
    position: absolute;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: .95;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

.servicios__sticker--marketing {
    top: 0%;
    width: 92%;
    z-index: 4;
    transform: translateX(-50%) rotate(7deg);
    container-type: inline-size;
    cursor: pointer;
}
.servicios__label--marketing {
    color: #181934;
    /* Texto grande que llena el sticker; padding-left deja hueco a la flecha */
    font-size: 12.2cqw;
    font-weight: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    inset: 8% 5% 11% 5%;
    padding-left: 11%;
    box-sizing: border-box;
    text-align: center;
    line-height: .92;
}
.servicios__label-line {
    display: block;
}
/* Flecha en esquina inferior izquierda; el hover (scale) vive en animations.css */
.servicios__icon--arrow {
    left: 6.5%;
    bottom: 10.5%;
    top: auto;
    width: 9.6%;
    aspect-ratio: 47 / 45;
    height: auto;
    z-index: 3;
    background: url("../images/servicio-icon-arrow.svg") center / contain no-repeat;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.servicios__sticker--social {
    top: 18%;
    width: 100%;
    z-index: 4;
    transform: translateX(-50%) rotate(-9deg);
    overflow: visible;
    cursor: pointer;
}
.servicios__icon--bird {
    left: 50%;
    top: 30%;
    width: 18%;
    z-index: 3;
}

.servicios__sticker--diseno {
    top: 46%;
    width: 66%;
    z-index: 4;
    cursor: pointer;
}
.servicios__sticker--diseno .servicios__shape {
    transform-origin: center center;
}
.servicios__icon--swirl {
    left: 50%;
    top: 50%;
    /* Figma inset ~29–37% → ~40% del diámetro interno */
    width: 40%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    z-index: 3;
}

/* Tipografía DISEÑO / GRÁFICO exportada de Figma (proporciones exactas) */
.servicios__text-figma {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 2;
    user-select: none;
    object-fit: fill;
}
.servicios__text-figma--diseno-top {
    top: 10.47%;
    left: 9.69%;
    width: 81.18%;
    height: 32.27%;
}
.servicios__text-figma--diseno-bot {
    top: 56.64%;
    left: 12.86%;
    width: 77.33%;
    height: 32.64%;
}

/* Texto curvo (sigue siendo <text> real para animar luego) */
.servicios__curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}
.servicios__curve-text {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.servicios__curve-text--social {
    fill: #7a34ca;
    /* Imagen 1: tipografía grande que llena el arco */
    font-size: 56px;
    letter-spacing: .02em;
}

.servicios__accent {
    position: absolute;
    pointer-events: none;
    user-select: none;
}
.servicios__accent--burst {
    left: -20%;
    top: -6%;
    width: 70%;
    z-index: 2;
    transform: rotate(-16deg);
}
.servicios__accent--blob {
    right: 14%;
    top: 29%;
    width: 70%;
    aspect-ratio: 363 / 191;
    border-radius: 80px;
    background: var(--c-blue);
    z-index: 1;
    transform: rotate(22deg);
    box-shadow: 0 8px 24px rgba(53, 47, 218, .25);
}
.servicios__accent--bulb {
    left: 9%;
    bottom: 17%;
    width: 24%;
    z-index: 2;
}

.servicios__portfolio { margin-top: -50px; display: flex; justify-content: center; }
.btn-portfolio {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 22px;
    border-radius: 30px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, .02);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}
.btn-portfolio:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .08); }
.btn-portfolio .arrow { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }

@media (max-width: 900px) {
    .servicios__board {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 36px;
        margin: 48px auto 0;
    }
    .servicios__col--left,
    .servicios__col--right {
        align-items: center;
        text-align: center;
        padding: 0;
        justify-content: flex-start;
        gap: 10px;
    }
    .servicios__col--left { order: 2; }
    .servicios__stack { order: 1; max-width: 320px; aspect-ratio: 360 / 640; }
    .servicios__col--right { order: 3; gap: 28px; }
    .servicios__col-group {
        align-items: center;
        gap: 10px;
        width: min(100%, 34ch);
    }
    .servicios__col-group--bot { margin-top: 0; padding-bottom: 0; margin-left: 0; }
    .servicios__tag,
    .servicios__col--left .servicios__tag,
    .servicios__col--right .servicios__tag {
        transform-origin: center;
        text-align: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 16px;
        line-height: 1.35;
        padding: 8px 4px;
        max-width: none;
    }
    .servicios__tag--wrap { max-width: 28ch; }
    /* En móvil el fondo ya oscurece: tags claros con sombra para legibilidad */
    .servicios__tag--light {
        color: #fff;
        text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    }
    .servicios__portfolio {
        margin-top: 36px;
        padding-bottom: 8px;
    }
    .servicios__fade { height: min(78%, 720px); }
    .servicios__glow { bottom: 22%; height: min(50%, 520px); }
    .servicios__sticker--social { width: 100%; }
}

/* ==========================================================================
   ¿CÓMO LO HACEMOS? — carrusel clickable (Figma 197:1811)
   ========================================================================== */
.proceso {
    --proceso-card-w: min(858px, 86vw);
    --proceso-card-h: 332px;
    --proceso-stack: 92px;
    --proceso-next: min(1025px, 58vw);
    position: relative;
    isolation: isolate;
    background: transparent;
    padding: 120px 0 140px;
    min-height: 820px;
    overflow: visible; /* stickers may peek past the card */
    cursor: pointer;
    outline: none;
}
.proceso__bgs {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.proceso__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .55s ease;
}
.proceso__bg.is-active { opacity: 1; }
.proceso__bg--0 {
    /* Empalme con el navy del fade de Servicios (mesh #01001B / #0D0033) */
    background: #01001B;
}
.proceso__bg--1 {
    /* Figma Variant2: claro + blurs teal/lila */
    background:
        radial-gradient(ellipse 70% 80% at 0% 10%, rgba(90, 210, 200, .7), transparent 58%),
        radial-gradient(ellipse 55% 70% at 90% 5%, rgba(170, 120, 255, .55), transparent 52%),
        radial-gradient(ellipse 45% 50% at 45% -10%, rgba(140, 210, 255, .4), transparent 48%),
        radial-gradient(ellipse 40% 45% at 10% 90%, rgba(200, 160, 255, .35), transparent 50%),
        #f4f4f6;
}
.proceso__bg--2 {
    /* Figma Variant3: púrpura + blurs */
    background:
        radial-gradient(ellipse 85% 95% at 10% 75%, rgba(30, 190, 230, .6), transparent 55%),
        radial-gradient(ellipse 75% 85% at 90% 15%, rgba(60, 40, 210, .55), transparent 52%),
        #6532cb;
}
.proceso__bg--3 {
    /* Figma Variant4: gradiente púrpura → índigo */
    background: linear-gradient(90deg, #6432c9 0%, #290162 100%);
}
.proceso__bg--4 {
    /* Figma Variant5: oscuro + rosa/teal abajo */
    background:
        radial-gradient(ellipse 55% 60% at 18% 95%, rgba(255, 80, 150, .75), transparent 55%),
        radial-gradient(ellipse 60% 55% at 78% 90%, rgba(30, 210, 220, .6), transparent 55%),
        radial-gradient(ellipse 45% 45% at 50% 110%, rgba(120, 70, 255, .5), transparent 50%),
        #141022;
}
.proceso__noise {
    position: absolute;
    inset: -10%;
    opacity: 0;
    transition: opacity .55s ease;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.proceso[data-step="1"] .proceso__noise { opacity: .6; }
.proceso[data-step="2"] .proceso__noise,
.proceso[data-step="3"] .proceso__noise {
    mix-blend-mode: soft-light;
    opacity: .5;
}
.proceso[data-step="4"] .proceso__noise {
    mix-blend-mode: soft-light;
    opacity: .45;
}

.proceso > .container,
.proceso__stage {
    position: relative;
    z-index: 1;
}
.proceso__title {
    color: #fff;
    margin-bottom: 72px;
    transition: color .4s ease;
}
.proceso[data-step="1"] .proceso__title { color: var(--c-dark); }

.proceso__stage {
    position: relative;
    height: calc(var(--proceso-card-h) + 80px);
    margin-top: 8px;
}

.step-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--proceso-card-w);
    height: var(--proceso-card-h);
    border-radius: 18px;
    padding: 48px;
    display: flex;
    align-items: center;
    gap: 23px;
    overflow: visible;
    box-shadow:
        0 4px 4px rgba(12, 12, 13, .1),
        0 4px 4px rgba(12, 12, 13, .05);
    transform: translate(-50%, -50%);
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .35s ease,
        box-shadow .35s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}
.step-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 474px;
    transition: opacity .25s ease;
}
.step-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 37px);
    line-height: 1.18;
    letter-spacing: .0125em;
    margin: 0;
    display: flex;
    gap: 12px;
}
.step-card__title .num { font-variant-numeric: tabular-nums; }
.step-card__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.35;
    letter-spacing: .0125em;
    margin: 0;
    max-width: 419px;
}
.step-card__art {
    position: relative;
    flex: 0 0 224px;
    width: 224px;
    height: 224px;
    display: grid;
    place-items: center;
    overflow: visible;
    transition: opacity .25s ease;
    /* Evita el menú de imagen de Edge/Copilot; el click llega a la card */
    pointer-events: none;
}
.step-card__art img {
    /* Stickers ~half card height so text stays primary */
    width: 58%;
    max-width: 130px;
    max-height: 148px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.step-card--creamos .step-card__art img { transform: rotate(-24deg); width: 54%; }
.step-card--ejecutamos .step-card__art img { transform: rotate(-22deg); width: 56%; }
.step-card--medimos .step-card__art img { transform: rotate(40deg); width: 54%; }
.step-card--yellow { background: var(--c-yellow); color: var(--c-dark); }
.step-card--green { background: var(--c-green); color: #fff; }
.step-card--blue { background: var(--c-blue); color: #fff; }
.step-card--purple { background: var(--c-purple); color: #fff; }
.step-card--dark { background: var(--c-dark); color: #fff; }

/* Past cards: stacked strips on the left */
.step-card.is-past {
    cursor: pointer;
}
.step-card.is-past .step-card__body,
.step-card.is-past .step-card__art {
    opacity: 0;
    pointer-events: none;
}
.step-card.is-active {
    z-index: 10;
    box-shadow:
        0 10px 28px rgba(12, 12, 13, .18),
        0 4px 8px rgba(12, 12, 13, .1);
}
.step-card.is-next {
    z-index: 5;
}
.step-card.is-far {
    z-index: 1;
    opacity: .95;
}

/* Positions per active step — Figma offsets (~92px stack, ~1025px next) */
.proceso[data-step="0"] .step-card[data-step="0"] { transform: translate(calc(-50% - 112px), -50%); z-index: 10; }
.proceso[data-step="0"] .step-card[data-step="1"] { transform: translate(calc(-50% + var(--proceso-next)), -50%); z-index: 5; }
.proceso[data-step="0"] .step-card[data-step="2"] { transform: translate(calc(-50% + var(--proceso-next) * 1.9), -50%); }
.proceso[data-step="0"] .step-card[data-step="3"] { transform: translate(calc(-50% + var(--proceso-next) * 2.8), -50%); }
.proceso[data-step="0"] .step-card[data-step="4"] { transform: translate(calc(-50% + var(--proceso-next) * 3.7), -50%); }

.proceso[data-step="1"] .step-card[data-step="0"] { transform: translate(calc(-50% - 112px), -50%); z-index: 6; }
.proceso[data-step="1"] .step-card[data-step="1"] { transform: translate(calc(-50% - 20px), -50%); z-index: 10; }
.proceso[data-step="1"] .step-card[data-step="2"] { transform: translate(calc(-50% + var(--proceso-next)), -50%); z-index: 5; }
.proceso[data-step="1"] .step-card[data-step="3"] { transform: translate(calc(-50% + var(--proceso-next) * 1.9), -50%); }
.proceso[data-step="1"] .step-card[data-step="4"] { transform: translate(calc(-50% + var(--proceso-next) * 2.8), -50%); }

.proceso[data-step="2"] .step-card[data-step="0"] { transform: translate(calc(-50% - 112px), -50%); z-index: 6; }
.proceso[data-step="2"] .step-card[data-step="1"] { transform: translate(calc(-50% - 20px), -50%); z-index: 7; }
.proceso[data-step="2"] .step-card[data-step="2"] { transform: translate(calc(-50% + 72px), -50%); z-index: 10; }
.proceso[data-step="2"] .step-card[data-step="3"] { transform: translate(calc(-50% + var(--proceso-next)), -50%); z-index: 5; }
.proceso[data-step="2"] .step-card[data-step="4"] { transform: translate(calc(-50% + var(--proceso-next) * 1.9), -50%); }

.proceso[data-step="3"] .step-card[data-step="0"] { transform: translate(calc(-50% - 112px), -50%); z-index: 6; }
.proceso[data-step="3"] .step-card[data-step="1"] { transform: translate(calc(-50% - 20px), -50%); z-index: 7; }
.proceso[data-step="3"] .step-card[data-step="2"] { transform: translate(calc(-50% + 72px), -50%); z-index: 8; }
.proceso[data-step="3"] .step-card[data-step="3"] { transform: translate(calc(-50% + 164px), -50%); z-index: 10; }
.proceso[data-step="3"] .step-card[data-step="4"] { transform: translate(calc(-50% + var(--proceso-next)), -50%); z-index: 5; }

.proceso[data-step="4"] .step-card[data-step="0"] { transform: translate(calc(-50% - 112px), -50%); z-index: 6; }
.proceso[data-step="4"] .step-card[data-step="1"] { transform: translate(calc(-50% - 20px), -50%); z-index: 7; }
.proceso[data-step="4"] .step-card[data-step="2"] { transform: translate(calc(-50% + 72px), -50%); z-index: 8; }
.proceso[data-step="4"] .step-card[data-step="3"] { transform: translate(calc(-50% + 164px), -50%); z-index: 9; }
.proceso[data-step="4"] .step-card[data-step="4"] { transform: translate(calc(-50% + 256px), -50%); z-index: 10; }

/* ==========================================================================
   BAND inferior — Figma 198:2813 (mesh-bg2) desde Marcas hasta el footer
   El fondo se estira al alto de ESTE bloque, no al de toda la página.
   ========================================================================== */
.band-lower {
    position: relative;
    isolation: isolate;
    background: #030319;
}
.band-lower__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.band-lower__mesh {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill; /* mapea el arte completo al alto real del band */
    object-position: center top;
}
.band-lower__noise {
    position: absolute;
    inset: 0;
    opacity: var(--noise-opacity);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}
.band-lower > :not(.band-lower__bg) {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   MARCAS (logos) — transparente sobre band-lower
   ========================================================================== */
.marcas {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(40px, 6vh, 72px);
    box-sizing: border-box;
    background: transparent;
    padding: clamp(72px, 10vh, 120px) 0 clamp(80px, 12vh, 140px);
    overflow-x: clip;
    overflow-y: visible;
}
.marcas__title { color: #fff; margin-bottom: 0; }
.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    /* Espacio vertical para que el scale del hover no recorte logos altos */
    padding-block: clamp(32px, 4.5vh, 56px);
    margin-block: clamp(56px, 7vh, 88px);
}
.marquee__track { display: flex; align-items: center; gap: 100px; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track img { height: clamp(110px, 14vh, 160px); width: auto; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marcas__cta { margin-top: 0; text-align: center; }
.marcas__cta p {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 18px;
    color: #fff;
    margin: 0 0 26px;
}

/* ==========================================================================
   NÚMEROS — transparente sobre el mismo band (Figma 288:1751)
   ========================================================================== */
.numeros {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    background: transparent;
    padding: clamp(72px, 10vh, 120px) 0 clamp(80px, 12vh, 140px);
    overflow: hidden;
}
.numeros__title { color: var(--c-dark); background: transparent; margin-bottom: 40px; }
.numeros__title, .numeros__title .fun { color: var(--c-dark); }

.numeros__stage {
    --numeros-card-max-h: min(420px, 72%);
    --numeros-card-max-w: min(168px, 12.5vw);
    --numeros-open-gap: clamp(18px, 2.4vw, 40px);
    position: relative;
    height: min(640px, 74vh);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    outline: none;
    cursor: pointer;
}

.numeros__gallery {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.numeros__card {
    --card-x: 50%;
    --card-rot: 0deg;
    position: absolute;
    top: 50%;
    left: var(--card-x);
    width: auto;
    height: auto;
    max-width: var(--numeros-card-max-w);
    max-height: var(--numeros-card-max-h);
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 16px 32px -8px rgba(12, 12, 13, .4);
    transform: translate(-50%, -50%) rotate(var(--card-rot));
    transform-origin: center center;
    transition:
        left .65s cubic-bezier(.22, 1, .36, 1),
        transform .65s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        opacity .4s ease;
    will-change: left, transform;
}

/* Cerrado — Figma 288:1749 (abanico solapado) */
.numeros__card:nth-child(1) { --card-x: 31.6%; --card-rot: -2.4deg; z-index: 2; }
.numeros__card:nth-child(2) { --card-x: 39.5%; --card-rot: 0deg;    z-index: 3; }
.numeros__card:nth-child(3) { --card-x: 47.8%; --card-rot: 3.4deg;  z-index: 4; }
.numeros__card:nth-child(4) { --card-x: 56.2%; --card-rot: 0deg;    z-index: 5; }
.numeros__card:nth-child(5) { --card-x: 64.3%; --card-rot: -10.2deg; z-index: 4; }
.numeros__card:nth-child(6) { --card-x: 72.3%; --card-rot: 0deg;    z-index: 3; }

/* Abierto: posiciones las calcula JS (--card-x) para animar left sin cambiar a flex */
.numeros__stage.is-open .numeros__card {
    --card-rot: 0deg;
}

/* Capas de stickers */
.numeros__figs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.numeros__figs--back { z-index: 1; }
.numeros__figs--front { z-index: 3; }

.numeros__fig {
    position: absolute;
    opacity: .85;
    transform: translate(-50%, -50%) scale(.9);
    transition:
        opacity .35s ease,
        left .65s cubic-bezier(.22, 1, .36, 1),
        top .65s cubic-bezier(.22, 1, .36, 1),
        transform .5s cubic-bezier(.22, 1, .36, 1);
    max-width: none;
    height: auto;
    background: transparent;
}
.numeros__stage.is-open .numeros__fig {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ---- Cerrado ---- */
.numeros__fig--spark { left: 34%; top: 22%; width: 68px; }
.numeros__fig--semi  { left: 72%; top: 20%; width: 88px; }
.numeros__fig--wave  { left: 48%; top: 74%; width: 40px; }
.numeros__fig--bird  { left: 22%; top: 74%; width: 64px; }
.numeros__fig--blob  { left: 78%; top: 52%; width: clamp(90px, 11vw, 140px); }
.numeros__fig--smiley {
    left: 50%;
    top: 30%;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35);
}
.numeros__smiley-face {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: #181934;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 58px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* ---- Abierto (Figma 288:1748) — asoman en esquinas ---- */
.numeros__stage.is-open .numeros__fig--spark {
    left: 11%;
    top: 24%;
    width: 74px;
}
.numeros__stage.is-open .numeros__fig--bird {
    left: 27%;
    top: 20%;
    width: 56px;
}
.numeros__stage.is-open .numeros__fig--wave {
    left: 34%;
    top: 78%;
    width: 44px;
}
.numeros__stage.is-open .numeros__fig--semi {
    left: 74%;
    top: 20%;
    width: 92px;
}
.numeros__stage.is-open .numeros__fig--blob {
    left: 86%;
    top: 58%;
    width: clamp(100px, 12vw, 160px);
}
.numeros__stage.is-open .numeros__fig--smiley {
    /* delante, esquina BR captura 4 */
    opacity: 1;
    left: 56%;
    top: 74%;
    transform: translate(-50%, -50%) scale(1);
}
/* ==========================================================================
   CREEMOS JUNTOS (CTA final)
   ========================================================================== */
.creemos {
    background: transparent;
    padding: 90px 0 110px;
    text-align: center;
}
.creemos__logo {
    width: min(620px, 86vw);
    height: auto;
    margin: 0 auto 34px;
}
.creemos__text {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto 40px;
    max-width: 640px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: transparent;
    padding: 40px 0 50px;
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.site-footer__mark {
    display: block;
    width: 54px;
    max-width: 54px;
    height: auto;
    margin: 0 auto 40px;
}
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
.footer-col .h {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    opacity: .8;
    margin: 0 0 14px;
}
.footer-col .v {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}
.footer-col .v img { width: 26px; height: 26px; object-fit: contain; }
.footer-col .v .flag { border-radius: 50%; }
.site-footer__copy {
    text-align: center;
    margin-top: 46px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #fff;
    opacity: .75;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-height: 740px) {
    .hero__intro { width: min(280px, 72vw); max-height: min(32vh, 240px); }
    .hero__headline { font-size: clamp(18px, 2.5vw, 26px); }
    .hero__cta .lead { font-size: 17px; }
    .hero__cta { gap: 14px; }
    .hero .decor--curl-l { width: min(260px, 55vw); opacity: .26; }
    .hero .decor--curl-r { width: min(240px, 50vw); opacity: .26; }
}

@media (max-width: 900px) {
    :root { --nav-h: 72px; }

    .nav-links {
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 4px;
        padding: 16px 24px 22px;
        background: rgba(10, 7, 48, .96);
        backdrop-filter: blur(8px);
        display: none;
    }
    .nav-check:checked ~ .container .nav-links { display: flex; }
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 6px;
    }
    .nav-toggle span { width: 26px; height: 2px; background: #fff; display: block; }
    .site-nav .btn-cta { display: none; }

    .proceso {
        /* Tarjetas simétricas: mismo ancho/alto (imagen 2) */
        --proceso-card-w: min(300px, 78vw);
        --proceso-card-h: 400px;
        --proceso-peek: 76%;
        --proceso-stack: 56px;
        --proceso-next: 76%;
        padding: 72px 0 90px;
        min-height: 0;
        overflow-x: clip;
    }
    .proceso__stage { height: calc(var(--proceso-card-h) + 48px); }
    .step-card {
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
        width: var(--proceso-card-w);
        height: var(--proceso-card-h);
        min-height: var(--proceso-card-h);
        max-height: var(--proceso-card-h);
        padding: 28px 22px;
        gap: 16px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .step-card__body {
        max-width: none;
        align-items: center;
        gap: 14px;
        flex: 1 1 auto;
        justify-content: center;
        min-height: 0;
    }
    .step-card__title { font-size: clamp(22px, 5.5vw, 28px); justify-content: center; }
    .step-card__text {
        max-width: 28ch;
        font-size: clamp(14px, 3.6vw, 17px);
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .step-card__art { flex: 0 0 120px; width: 120px; height: 120px; }
    .step-card__art img { width: 88%; max-width: 110px; max-height: 120px; }
    .step-card--creamos .step-card__art img,
    .step-card--ejecutamos .step-card__art img,
    .step-card--medimos .step-card__art img { width: 84%; }

    /* Centro activo + peek izquierda/derecha del mismo tamaño */
    .proceso[data-step="0"] .step-card[data-step="0"] { transform: translate(-50%, -50%); z-index: 10; }
    .proceso[data-step="0"] .step-card[data-step="1"] { transform: translate(calc(-50% + var(--proceso-peek)), -50%); z-index: 5; }
    .proceso[data-step="0"] .step-card[data-step="2"],
    .proceso[data-step="0"] .step-card[data-step="3"],
    .proceso[data-step="0"] .step-card[data-step="4"] { transform: translate(calc(-50% + 110%), -50%); opacity: 0; pointer-events: none; }

    .proceso[data-step="1"] .step-card[data-step="0"] { transform: translate(calc(-50% - var(--proceso-peek)), -50%); z-index: 6; }
    .proceso[data-step="1"] .step-card[data-step="1"] { transform: translate(-50%, -50%); z-index: 10; }
    .proceso[data-step="1"] .step-card[data-step="2"] { transform: translate(calc(-50% + var(--proceso-peek)), -50%); z-index: 5; }
    .proceso[data-step="1"] .step-card[data-step="3"],
    .proceso[data-step="1"] .step-card[data-step="4"] { transform: translate(calc(-50% + 110%), -50%); opacity: 0; pointer-events: none; }

    .proceso[data-step="2"] .step-card[data-step="0"] { transform: translate(calc(-50% - 110%), -50%); opacity: 0; pointer-events: none; }
    .proceso[data-step="2"] .step-card[data-step="1"] { transform: translate(calc(-50% - var(--proceso-peek)), -50%); z-index: 6; }
    .proceso[data-step="2"] .step-card[data-step="2"] { transform: translate(-50%, -50%); z-index: 10; }
    .proceso[data-step="2"] .step-card[data-step="3"] { transform: translate(calc(-50% + var(--proceso-peek)), -50%); z-index: 5; }
    .proceso[data-step="2"] .step-card[data-step="4"] { transform: translate(calc(-50% + 110%), -50%); opacity: 0; pointer-events: none; }

    .proceso[data-step="3"] .step-card[data-step="0"],
    .proceso[data-step="3"] .step-card[data-step="1"] { transform: translate(calc(-50% - 110%), -50%); opacity: 0; pointer-events: none; }
    .proceso[data-step="3"] .step-card[data-step="2"] { transform: translate(calc(-50% - var(--proceso-peek)), -50%); z-index: 6; }
    .proceso[data-step="3"] .step-card[data-step="3"] { transform: translate(-50%, -50%); z-index: 10; }
    .proceso[data-step="3"] .step-card[data-step="4"] { transform: translate(calc(-50% + var(--proceso-peek)), -50%); z-index: 5; }

    .proceso[data-step="4"] .step-card[data-step="0"],
    .proceso[data-step="4"] .step-card[data-step="1"],
    .proceso[data-step="4"] .step-card[data-step="2"] { transform: translate(calc(-50% - 110%), -50%); opacity: 0; pointer-events: none; }
    .proceso[data-step="4"] .step-card[data-step="3"] { transform: translate(calc(-50% - var(--proceso-peek)), -50%); z-index: 6; }
    .proceso[data-step="4"] .step-card[data-step="4"] { transform: translate(-50%, -50%); z-index: 10; }

    /* Números móvil: mazo cerrado (Figma 360:4176) / cascada abierta (360:4189) */
    .numeros {
        overflow: visible;
        min-height: 0;
        justify-content: flex-start;
    }
    .numeros__stage {
        --numeros-card-max-h: min(420px, 62vh);
        --numeros-card-max-w: min(210px, 54vw);
        height: min(560px, 72vh);
        max-width: 100%;
    }
    .numeros__card {
        left: 50%;
        --card-x: 50%;
        width: auto;
        max-width: var(--numeros-card-max-w);
        max-height: var(--numeros-card-max-h);
        transition:
            top .65s cubic-bezier(.22, 1, .36, 1),
            left .65s cubic-bezier(.22, 1, .36, 1),
            transform .65s cubic-bezier(.22, 1, .36, 1),
            box-shadow .4s ease,
            opacity .4s ease;
    }
    /* Cerrado: deck centrado, leve offset vertical + rotación */
    .numeros__card:nth-child(1) { top: 40%; --card-rot: -2.4deg; z-index: 2; }
    .numeros__card:nth-child(2) { top: 46%; --card-rot: 0deg;    z-index: 3; }
    .numeros__card:nth-child(3) { top: 36%; --card-rot: 3.4deg;  z-index: 4; }
    .numeros__card:nth-child(4) { top: 50%; --card-rot: 0deg;    z-index: 5; }
    .numeros__card:nth-child(5) { top: 44%; --card-rot: -10.2deg; z-index: 4; }
    .numeros__card:nth-child(6) { top: 54%; --card-rot: 0deg;    z-index: 6; }

    .numeros__stage.is-open {
        height: 1680px;
    }
    .numeros__stage.is-open .numeros__gallery {
        inset: auto;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
    }
    .numeros__stage.is-open .numeros__card {
        left: 50%;
        transform: translate(-50%, 0) rotate(var(--card-rot));
        max-width: min(220px, 56vw);
        max-height: none;
        width: min(220px, 56vw);
        height: auto;
    }
    .numeros__stage.is-open .numeros__card:nth-child(1) { top: 12px;   --card-rot: 0deg;    z-index: 1; }
    .numeros__stage.is-open .numeros__card:nth-child(2) { top: 300px;  --card-rot: -6.6deg; z-index: 2; }
    .numeros__stage.is-open .numeros__card:nth-child(3) { top: 580px;  --card-rot: 0deg;    z-index: 3; }
    .numeros__stage.is-open .numeros__card:nth-child(4) { top: 900px;  --card-rot: -11deg;  z-index: 4; }
    .numeros__stage.is-open .numeros__card:nth-child(5) { top: 1160px; --card-rot: 8.4deg;  z-index: 5; }
    .numeros__stage.is-open .numeros__card:nth-child(6) { top: 1420px; --card-rot: -12.8deg; z-index: 6; }

    .numeros__fig--bird { width: 52px; }
    .numeros__fig--blob { width: clamp(72px, 14vw, 110px); }
    .numeros__fig--smiley { width: 48px; }
    .numeros__stage.is-open .numeros__figs { opacity: .9; }

    .marcas { gap: 36px; padding: 80px 0 64px; }
    .marquee__track { gap: 64px; }
    .marquee__track img { height: clamp(88px, 12vh, 120px); }
    .marcas__cta p { font-size: 15px; }

    .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .hero__headline { font-size: 22px; }

    .proceso {
        --proceso-card-w: min(280px, 82vw);
        --proceso-card-h: 380px;
        --proceso-peek: 78%;
    }
    .proceso__stage { height: calc(var(--proceso-card-h) + 36px); }

    .servicios__tag { font-size: 15px; }
    .servicios__portfolio { margin-top: 28px; }

    .numeros__stage {
        --numeros-card-max-h: min(380px, 58vh);
        --numeros-card-max-w: min(200px, 58vw);
        height: min(500px, 68vh);
    }
    .numeros__stage.is-open { height: 1580px; }
    .numeros__stage.is-open .numeros__card:nth-child(1) { top: 8px; }
    .numeros__stage.is-open .numeros__card:nth-child(2) { top: 280px; }
    .numeros__stage.is-open .numeros__card:nth-child(3) { top: 540px; }
    .numeros__stage.is-open .numeros__card:nth-child(4) { top: 840px; }
    .numeros__stage.is-open .numeros__card:nth-child(5) { top: 1080px; }
    .numeros__stage.is-open .numeros__card:nth-child(6) { top: 1320px; }
    .numeros__figs { display: none; }
    .numeros__stage.is-open .numeros__figs { display: block; opacity: .85; }

    .marcas { gap: 28px; padding: 72px 0 56px; }
    .marquee__track { gap: 44px; }
    .marquee__track img { height: clamp(72px, 11vh, 96px); }
    .site-footer__cols { grid-template-columns: 1fr; text-align: center; }
    .footer-col .v { justify-content: center; }
}