/* ---------------------------------------
   Núcleo de estilos (tema oscuro)
--------------------------------------- */
:root {
    --bg: #0a0d14;
    --overlay: rgba(5, 8, 14, .88);
    --overlay-2: rgba(6, 10, 18, .96);
    --text: #f1f5ff;
    --muted: #9aa6bf;
    --primary: #3b82f6;
    --primary-2: #60a5fa;
    --speed: .55s;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

html,
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    padding: 0;
    /* Firefox */
    scrollbar-width: none;
    /* IE/Edge heredado */
    -ms-overflow-style: none;
}

/* Chrome, Edge (Chromium), Safari, Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------
   Header + botón burger
--------------------------------------- */
.s-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 68px;
    z-index: 1000;
    display: flex;
    align-items: center;
    background: transparent;
}

.s-header .container {
    width: min(1200px, 92%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo img {
    height: 34px;
    width: auto;
}

.header-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .56rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .56rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
}

.header-menu-icon {
    width: 18px;
    height: 2px;
    background: var(--text);
    position: relative;
    border-radius: 2px;
}

.header-menu-icon::before,
.header-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .5s var(--ease), opacity .5s var(--ease);
}

.header-menu-icon::before {
    top: -6px;
}

.header-menu-icon::after {
    top: 6px;
}

.nav-open .header-menu-icon {
    background: transparent;
}

.nav-open .header-menu-icon::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-open .header-menu-icon::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------
   Menú lateral fullscreen (barrido)
--------------------------------------- */
:root {
    --bg: #0b1020;
    --panel: #0f152b;
    --text: #e7ecff;
    --muted: #a6b0d4;
    --primary: #3b82f6;
    --primary-2: #60a5fa;
    --overlay: rgba(5, 8, 15, .64);
    --overlay-2: rgba(20, 30, 60, .22);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --mirror-ease: cubic-bezier(.22, .61, .36, 1);
    --mirror-dur: .55s;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(1400px 800px at 20% -10%, #122058 0%, #0b1020 40%, #0b1020 100%);
    color: var(--text);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
}

h1 {
    margin: 0;
    font-size: clamp(18px, 2vw, 24px);
}

.content {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 18px;
}

.card {
    background: #0f1428aa;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    padding: 18px;
    backdrop-filter: blur(6px);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: transform .18s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .1);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== LAYER + OVERLAY ===== */
.nav-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}

body.nav-open .nav-layer {
    pointer-events: auto;
    visibility: visible;
}

.nav-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(80vw 80vh at 25% 20%, var(--overlay-2), var(--overlay));
    opacity: 0;
    transition: opacity var(--mirror-dur) var(--mirror-ease);
    will-change: opacity;
}

/* Overlay ON mientras abre/abierto; OFF durante cierre (fade out) */
body.nav-opening .nav-overlay,
body.nav-open .nav-overlay {
    opacity: 1;
}

body.nav-closing .nav-overlay {
    opacity: 0;
}

/* ===== DRAWER base (mobile: slide por defecto) ===== */
.nav-drawer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    contain: layout paint;
    isolation: isolate;
    transform: translateX(100%);
    transition: transform var(--mirror-dur) var(--mirror-ease);
    will-change: transform;
    background: transparent;
}

body.nav-open .nav-drawer {
    transform: translateX(0%);
}

.nav-left {
    position: relative;
    background: #0000009c;
    padding: clamp(20px, 5vh, 40px) clamp(20px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: min(3vh, 26px);
    justify-content: flex-start;
    overflow: hidden;
}

.nav-ambient {
    position: absolute;
    inset: -20% -10% -30% -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(40px) saturate(130%);
    background:
        radial-gradient(closest-side at 18% 22%, rgba(59, 130, 246, .18), transparent 60%),
        radial-gradient(closest-side at 80% 70%, rgba(96, 165, 250, .14), transparent 60%),
        conic-gradient(from 120deg, rgba(96, 165, 250, .10), rgba(59, 130, 246, .04), rgba(96, 165, 250, .10));
    animation: aurora 28s linear infinite;
}

@keyframes aurora {
    to {
        transform: rotate(360deg) scale(1.02);
    }
}

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

.nav-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: .96;
    font-weight: 800;
    letter-spacing: .06em;
}

.nav-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.stat {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

.stat .num {
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 22px);
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat .label {
    font-size: .78rem;
    color: var(--muted);
}

.nav-aside {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
    margin-top: auto;
}

.nav-right {
    background: linear-gradient(180deg, rgba(10, 13, 20, .92) 0%, rgba(10, 13, 20, 1) 100%);
    padding: clamp(28px, 6vh, 56px) clamp(22px, 6vw, 80px);
    display: flex;
    flex-direction: column;
}

.nav-close {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    cursor: pointer;
    transition: transform .2s var(--ease);
}

.nav-close:hover {
    transform: scale(1.04);
}

.nav-title {
    font-weight: 700;
    letter-spacing: .02em;
    opacity: .9;
    margin-top: 12px;
}

.nav-list {
    --gap: clamp(14px, 1.8vh, 18px);
    list-style: none;
    padding: 0;
    margin: clamp(18px, 4vh, 36px) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.6vw, 22px);
}

.nav-num {
    font-weight: 700;
    opacity: .3;
    font-size: clamp(16px, 1.6vw, 18px);
    min-width: 2ch;
    text-align: right;
    transition: opacity .3s var(--ease), color .3s var(--ease);
    transform: translateY(8px);
    opacity: 0;
}

.nav-link {
    position: relative;
    display: inline-block;
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .01em;
    font-size: clamp(28px, 4.6vw, 64px);
    line-height: 1.06;
    transform: translateY(8px);
    opacity: 0;
    will-change: transform, opacity;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    transition: width .35s var(--ease);
}

.nav-item:hover .nav-link::after {
    width: 100%;
}

.nav-link.active {
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(59, 130, 246, .18);
}

.nav-item.active .nav-num {
    opacity: .85;
    color: var(--primary-2);
}

.nav-link.active::after {
    width: 32%;
}

.nav-has-active .nav-item:not(.active) .nav-link {
    opacity: .55;
    filter: saturate(.85);
}

.nav-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-wrap: wrap;
}

.nav-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-social a {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, .03);
}

.nav-social a::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%) translateY(6px) scale(.96);
    opacity: 0;
    pointer-events: none;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text);
    font-size: .78rem;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    white-space: nowrap;
}

.nav-social a:hover::after,
.nav-social a:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.nav-quick {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== Stagger ===== */
@keyframes fadeUpNum {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUpText {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger .nav-num._inNum {
    animation: fadeUpNum .42s var(--mirror-ease) forwards;
}

.stagger .nav-link._inText {
    animation: fadeUpText .48s var(--mirror-ease) forwards;
}

/* ===== Desktop: clip-path mirror sweep (wrapper NO se mueve) ===== */
@media (min-width:961px) {
    body.nav-clip-mode .nav-drawer {
        transform: none;
        transition: none;
    }

    body.nav-clip-mode .nav-left,
    body.nav-clip-mode .nav-right {
        will-change: clip-path, transform, opacity;
        contain: paint;
        transition:
            clip-path var(--mirror-dur) var(--mirror-ease),
            transform var(--mirror-dur) var(--mirror-ease),
            opacity var(--mirror-dur) var(--mirror-ease);
    }

    /* Cerrado: ocultas hacia el centro */
    body.nav-clip-mode .nav-left {
        clip-path: inset(0 100% 0 0);
        transform: translateX(-6%) var(--parallax, translate3d(0, 0, 0));
    }

    body.nav-clip-mode .nav-right {
        clip-path: inset(0 0 0 100%);
        transform: translateX(6%) var(--parallax, translate3d(0, 0, 0));
    }

    /* Abriendo/abierto */
    body.nav-clip-mode.nav-opening .nav-left,
    body.nav-clip-mode.nav-open .nav-left,
    body.nav-clip-mode.nav-opening .nav-right,
    body.nav-clip-mode.nav-open .nav-right {
        clip-path: inset(0 0 0 0);
        transform: translateX(0) var(--parallax, translate3d(0, 0, 0));
    }

    /* Cerrando: barrido inverso */
    body.nav-clip-mode.nav-closing .nav-left {
        clip-path: inset(0 100% 0 0);
        transform: translateX(-6%) var(--parallax, translate3d(0, 0, 0));
    }

    body.nav-clip-mode.nav-closing .nav-right {
        clip-path: inset(0 0 0 100%);
        transform: translateX(6%) var(--parallax, translate3d(0, 0, 0));
    }
}

/* ===== Mobile: slide wrapper ===== */
@media (max-width:960px) {
    .nav-drawer {
        transform: translateX(100%);
        transition: transform var(--mirror-dur) var(--mirror-ease);
    }

    body.nav-open .nav-drawer {
        transform: translateX(0%);
    }

    /* Cierre animado en mobile aunque nav-open siga activo durante la animación */
    body.nav-closing .nav-drawer {
        transform: translateX(100%);
    }

    .nav-drawer {
        grid-template-columns: 1fr;
    }

    .nav-left {
        display: none;
    }

    .nav-right {
        padding: clamp(28px, 8vh, 64px) clamp(22px, 8vw, 40px);
    }

    .nav-link {
        font-size: clamp(28px, 9vw, 46px);
    }

    .nav-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .nav-quick {
        margin-left: 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .nav-drawer,
    .nav-overlay,
    .nav-left,
    .nav-right,
    .nav-link,
    .nav-num,
    .nav-ambient {
        transition: none !important;
        animation: none !important;
    }

    body.nav-clip-mode .nav-left,
    body.nav-clip-mode .nav-right {
        clip-path: inset(0 0 0 0) !important;
        transform: none !important;
    }
}

.btn-quick {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #25d366;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: transform .2s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.btn-quick:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}

.btn-quick.primary {
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-color: rgba(96, 165, 250, .45);
    color: #0b1020;
}


/* ---------------------------------------
   HERO / INICIO (video + overlay + texto)
--------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #f1f5ff;
    isolation: isolate;
}

.hero__videoWrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .6s ease, transform 8s ease;
}

.hero.is-ready .hero__video {
    opacity: 1;
    transform: scale(1);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(0, 0, 0, .40), transparent 60%),
        linear-gradient(180deg, rgba(5, 8, 14, .70) 0%, rgba(5, 8, 14, .55) 40%, rgba(5, 8, 14, .80) 100%);
}

.hero__inner {
    position: relative;
    z-index: 3;
    width: min(1200px, 92%);
    margin-inline: auto;
    padding-top: 72px;
    display: grid;
    gap: 18px;
}

.hero__kicker {
    font-family: 'Sora', ui-sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .9;
    font-size: clamp(.8rem, 1.2vw, 1rem);
    color: #b8c4dd;
}

.hero__title {
    font-family: 'Sora', ui-sans-serif;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    font-size: clamp(32px, 6vw, 66px);
    margin: 0;
}

.hero__title .grad {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 22px rgba(59, 130, 246, .18);
}

.hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: #c6d0e3;
    max-width: 60ch;
    opacity: .95;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .15s ease, background .25s ease, border-color .25s ease;
}

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

.btn.primary {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-color: rgba(96, 165, 250, .45);
    color: #0b1020;
}

.btn.ghost {
    background: rgba(255, 255, 255, .06);
    color: #f1f5ff;
}

.hero__scroll {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: .9rem;
    color: #c6d0e3;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    opacity: .9;
}

.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #60a5fa;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: .8;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}

/* Animación genérica con delays por variable */
.hero [data-anim] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0s);
}

.hero.is-inview [data-anim] {
    opacity: 1;
    transform: none;
}

/* Responsive hero */
@media (max-width:720px) {
    .hero__inner {
        gap: 14px;
    }

    .hero__lead {
        max-width: 40ch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__video {
        transition: none !important;
        transform: none !important;
    }

    .hero [data-anim] {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__dot {
        animation: none !important;
    }
}

/* ============================
   ABOUT / NOSOTROS
   - Grid 2 columnas (texto + highlights)
   - Métricas con count-up
   - Animaciones con data-anim + --d
============================ */
.section {
    padding-block: clamp(64px, 12vh, 120px);
}

.container-xl {
    width: min(1200px, 92%);
    margin-inline: auto;
}

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

.about__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.about__kicker {
    font-family: 'Sora', ui-sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #b8c4dd;
    opacity: .9;
    font-size: .9rem;
    margin-bottom: .4rem;
}

.about__title {
    font-family: 'Sora', ui-sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4.8vw, 48px);
    line-height: 1.08;
    margin: 0 0 .6rem;
}

.about__title .grad {
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(59, 130, 246, .18);
}

.about__lead {
    color: #c6d0e3;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    max-width: 62ch;
    opacity: .95;
}

.about__bullets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.bullet {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

.bullet__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    color: #0b1020;
    font-weight: 700;
    font-size: .95rem;
    flex: 0 0 28px;
}

.bullet__text {
    color: #d4dbee;
    font-size: .98rem;
    line-height: 1.45
}

.about__panel {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
    padding: clamp(16px, 3.6vh, 28px);
    overflow: hidden;
}

.about__panel::before {
    content: "";
    position: absolute;
    inset: -40% -20% -40% -20%;
    z-index: 0;
    filter: blur(40px);
    background:
        radial-gradient(closest-side at 18% 22%, rgba(59, 130, 246, .18), transparent 60%),
        radial-gradient(closest-side at 80% 70%, rgba(96, 165, 250, .16), transparent 60%);
    opacity: .7;
}

.metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.metric {
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    padding: 14px;
}

.metric__num {
    font-family: 'Sora';
    font-weight: 700;
    line-height: 1;
    font-size: clamp(24px, 3.6vw, 34px);
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.metric__label {
    color: #9fb0ce;
    font-size: .88rem;
}

.badges {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.badge {
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
    padding: .45rem .7rem;
    color: #dbe7ff;
    font-weight: 600;
    font-size: .86rem;
}

/* Línea inferior decorativa */
.about__line {
    height: 1px;
    width: 100%;
    margin-top: clamp(22px, 4vh, 36px);
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .45), transparent);
}

/* Animación con data-anim + --d (igual patrón del hero) */
.reveal [data-anim] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0s);
}

.reveal.is-inview [data-anim] {
    opacity: 1;
    transform: none;
}

/* Responsive */
@media (max-width: 980px) {
    .about__grid {
        grid-template-columns: 1fr;
    }

    .about__panel {
        order: -1;
    }
}

/* Prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .reveal [data-anim] {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==============================
   Secciones de pantalla completa
   ============================== */

/* Activa snap vertical a nivel página */
html,
body {
    height: 100%;
}

body {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    /* evita rebotes extraños en mobile */
}

/* Clase para que cada sección llene la pantalla */
.fullscreen {
    /* dvh/svh para móviles modernos; --vh como fallback JS */
    min-block-size: 100svh;
    min-block-size: calc(var(--vh, 1vh) * 100);
    display: grid;
    align-content: center;
    /* centra verticalmente el grid interno */
    justify-items: center;
    /* centra horizontalmente si quieres */
    scroll-snap-align: start;
    /* encaja al inicio del viewport */
    scroll-snap-stop: always;
    /* fuerza el encaje: mejor UX con wheel */
    position: relative;
    /* para pseudo-elementos/overlays */
}

/* Si alguna sección necesita scroll interno (contenido largo), usa esta envoltura */
.fullscreen__inner {
    inline-size: min(1200px, 92%);
    max-block-size: calc(100% - 72px);
    /* 72px ≈ header + respiración */
    overflow: auto;
    /* scroll interno si se pasa */
}

/* Suaviza el desplazamiento de anclas (además del smoothscroll que ya tienes) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

/* Integra con tu hero/about ya existentes */
.hero {
    min-block-size: 100svh;
}

.about.section {
    min-block-size: 100svh;
    display: grid;
    align-content: center;
}


/* ============================
   SERVICES V3 (full viewport)
   ============================ */


:root {
    --sv3-dur: .45s;
    /* duración de la animación de entrada */
    --sv3-stagger: .08s;
    /* escalón entre tarjetas (delay incremental) */
}

/* Fondo alterno diferente a otras secciones (azul profundo) */
.section--alt3 {
    background:
        radial-gradient(120% 120% at 85% -10%, rgba(59, 130, 246, .10), transparent 60%),
        linear-gradient(180deg, #0a1220 0%, #0a0d14 100%);
}

/* Contenedor principal (100% viewport) */
.servicesV3.fullscreen {
    min-block-size: 100svh;
    min-block-size: calc(var(--vh, 1vh) * 100);
    padding: clamp(14px, 2vh, 18px);
    padding-block: clamp(64px, 12vh, 120px);
    display: grid;
    grid-template-rows: auto 1fr;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    isolation: isolate;
}

/* Encabezado compacto */
.sv3-head {
    display: grid;
    gap: .35rem;
    margin-bottom: clamp(20px, 1.6vh, 12px);
}

.sv3-kicker {
    font-family: 'Sora', ui-sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #c0cbe4;
    opacity: .95;
    font-size: .85rem;
    text-align: center;
}

.sv3-title {
    font-family: 'Sora', ui-sans-serif;
    font-weight: 800;
    line-height: 1.08;
    font-size: clamp(22px, 3.6vw, 34px);
    margin: 0;
    text-align: center;
}

.sv3-title .grad {
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* GRID: desktop 3x2, ocupa todo el alto disponible */
.sv3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(10px, 1.6vw, 16px);
    min-height: 0;
    /* seguridad si el padre usa grid */
}


/* Tarjeta sobria (compacta) */
.sv3-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 8px;
    padding: clamp(12px, 2.2vh, 16px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    will-change: transform, opacity;
    overflow: hidden;
    transition:
        transform var(--sv3-dur) var(--ease),
        opacity var(--sv3-dur) var(--ease),
        border-color .24s var(--ease),
        background .24s var(--ease),
        box-shadow .24s var(--ease);
}

.sv3-card:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, .30);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 10px 24px rgba(10, 16, 28, .36);
}

/* Icono/placa con pop */
.sv3-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    color: #0b1020;
    font-weight: 800;
    font-size: 18px;
    transform: scale(.92);
    transition: transform .28s var(--ease), filter .28s var(--ease);
}

.sv3-card:hover .sv3-ico {
    transform: scale(1);
    filter: saturate(1.05);
}

/* Texto */
.sv3-h3 {
    font-weight: 800;
    letter-spacing: .01em;
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    margin-top: 2px;
}

.sv3-desc {
    color: #d4dbee;
    font-size: .93rem;
    line-height: 1.44;
}

.sv3-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-self: end;
}

.tag {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    padding: .22rem .5rem;
    font-size: .75rem;
    color: #e4edff;
    font-weight: 600;
}

/* ===== Animaciones visibles y robustas =====
   Estado inicial solo si NO hay .is-inview (evita parpadeos).
*/
.servicesV3 .sv3-card {
    opacity: 1;
    transform: none;
}

.servicesV3:not(.is-inview) .sv3-card {
    opacity: 0;
    transform: translateY(24px);
}

.servicesV3.is-inview .sv3-card {
    opacity: 1;
    transform: none;
}

/* Stagger claro (reordenado para 3x2) */
.servicesV3.is-inview .sv3-card:nth-child(1) {
    transition-delay: calc(var(--sv3-stagger) * 1);
}

.servicesV3.is-inview .sv3-card:nth-child(2) {
    transition-delay: calc(var(--sv3-stagger) * 2);
}

.servicesV3.is-inview .sv3-card:nth-child(3) {
    transition-delay: calc(var(--sv3-stagger) * 3);
}

.servicesV3.is-inview .sv3-card:nth-child(4) {
    transition-delay: calc(var(--sv3-stagger) * 4);
}

.servicesV3.is-inview .sv3-card:nth-child(5) {
    transition-delay: calc(var(--sv3-stagger) * 5);
}

.servicesV3.is-inview .sv3-card:nth-child(6) {
    transition-delay: calc(var(--sv3-stagger) * 6);
}


/* “Pop” del icono con retraso suave al entrar */
.servicesV3:not(.is-inview) .sv3-ico {
    transform: scale(.84);
    opacity: .85;
}

.servicesV3.is-inview .sv3-ico {
    transition-delay: .10s;
    transform: scale(1);
}

/* ===== Responsive móvil: 1 columna × 6 filas ===== */
/* Móvil: 1 columna × 6 filas */
@media (max-width: 680px) {
    .sv3-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        gap: 10px;
    }

    .sv3-card {
        padding: 12px;
    }

    .sv3-ico {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .sv3-h3 {
        font-size: 1rem;
    }

    .sv3-desc {
        font-size: .88rem;
    }

    .tag {
        font-size: .72rem;
    }
}

/* ===== Services V3: ocultar tags en móvil y compactar card ===== */
@media (max-width: 680px) {

    /* Oculta el contenedor de chips/tags */
    .sv3-tags {
        display: none !important;
    }

    /* Como ya no hay fila de tags, quitamos la última fila del grid */
    .sv3-card {
        grid-template-rows: auto auto 1fr;
        /* antes: auto auto 1fr auto */
        gap: 8px;
        /* mantén una separación cómoda */
    }

    /* Opcional: cierra un poco el espacio del texto */
    .sv3-desc {
        margin-bottom: 0;
    }
}


/* ===== Responsive ===== */
/* Tablet: 2 columnas × 3 filas */
@media (max-width: 1024px) {
    .sv3-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {

    .servicesV3 .sv3-card,
    .sv3-ico {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ======================================
   SUITES — FINAL CSS
   ====================================== */

/* Fondo claro de alto contraste (no azul) */
.section--contrastLight {
    background:
        radial-gradient(120% 120% at 10% -10%, rgba(10, 16, 28, .06), transparent 60%),
        linear-gradient(180deg, #f6f8fc 0%, #f1f4fa 100%);
    color: #0b1020;
}

.suitesV2.fullscreen {
    min-block-size: 100svh;
    min-block-size: calc(var(--vh, 1vh)*100);
    padding: clamp(14px, 2vh, 18px);
    padding-block: clamp(64px, 12vh, 120px);
    display: grid;
    grid-template-rows: auto 1fr;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    isolation: isolate;
}

/* Head */
.sv2-head {
    display: grid;
    gap: .35rem;
    margin-bottom: clamp(8px, 1.6vh, 12px);
    text-align: center;
}

.sv2-kicker {
    font-family: 'Sora', ui-sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .85rem;
    color: #334155;
    opacity: .9;
}

.sv2-title {
    font-family: 'Sora', ui-sans-serif;
    font-weight: 800;
    line-height: 1.08;
    font-size: clamp(22px, 3.6vw, 34px);
    margin: 0;
}

.sv2-title .grad {
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* GRID: 2x3 en desktop/tablet; 1x6 en móvil */
.sv2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: clamp(10px, 1.6vw, 16px);
    min-height: 0;
}

/* Card */
.suite {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: clamp(12px, 2vh, 16px);
    will-change: transform, opacity;
    transition:
        transform .24s var(--ease),
        border-color .24s var(--ease),
        background .24s var(--ease),
        box-shadow .24s var(--ease),
        opacity .24s var(--ease);
}

.suite::after {
    content: "";
    position: absolute;
    inset: -30% -70% auto -70%;
    height: 160%;
    transform: rotate(20deg) translateX(-30%);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    transition: transform .7s var(--ease), opacity .35s var(--ease);
    pointer-events: none;
    z-index: 0;
}

.suite:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, .35);
    box-shadow: 0 10px 32px rgba(15, 23, 42, .12);
}

.suite:hover::after {
    transform: rotate(20deg) translateX(35%);
    opacity: .25;
}

/* Contenido siempre encima del sheen */
.suite>* {
    position: relative;
    z-index: 1;
}

.suite__footer {
    position: relative;
    z-index: 2;
}

/* Header de card */
.suite__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.suite__name {
    font-weight: 800;
    letter-spacing: .01em;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: #0b1020;
}

/* Tier chips */
.suite__tier {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .2rem .55rem;
    color: #0b1020;
}

.tier--basic {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.tier--intermediate {
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.tier--premium {
    background: linear-gradient(90deg, #8b5cf6, #d946ef);
}

/* Servicios incluidos */
.suite__services {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.badge {
    border: 1px solid rgba(15, 23, 42, .12);
    background: #f1f5f9;
    border-radius: 999px;
    padding: .22rem .5rem;
    font-size: .74rem;
    color: #0b1020;
    font-weight: 700;
}

/* ===========================
   BODY: Slide-Swap (sin height animada)
   =========================== */

.suite__body {
    position: relative;
    perspective: none;
    transition: none !important;
    /* no animar height */
    overflow: clip;
    /* recorta el slide */
    /* padding lo aportaremos con .pane-inner para evitar conflictos */
}

.suite__stack {
    position: relative;
    display: grid;
    grid-template: 1fr / 1fr;
    /* superponer panes */
}

/* Base panes (superpuestos) */
.suite__stack>.suite__pane {
    grid-area: 1 / 1;
    will-change: transform, opacity, filter;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateX(12px);
    /* entra desde derecha */
    transition:
        opacity .28s var(--ease),
        transform .36s cubic-bezier(.22, 1, .36, 1),
        filter .28s var(--ease);
}

/* Pane activo */
.suite__stack>.suite__pane.is-active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    filter: none;
    z-index: 2;
}

/* Pane saliente */
.suite__stack>.suite__pane.is-leaving {
    pointer-events: none;
    visibility: visible;
    opacity: 0;
    transform: translateX(-12px);
    filter: saturate(.85) blur(.5px);
    z-index: 1;
}

/* Padding interno (evita depender del padding del body) */
.suite__pane>.pane-inner {
    padding: 10px;
}

/* Neutraliza reglas heredadas que usaban display:none */
.suite__pane.is-hidden {
    display: block !important;
}

/* Tipografía cuerpo */
.suite__label {
    color: #0f172a;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.suite__text {
    color: #1f2937;
    font-size: .93rem;
    line-height: 1.5;
}

/* Footer */
.suite__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    transition: transform .18s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
}

.btn.primary {
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-color: rgba(59, 130, 246, .45);
    color: #0b1020;
}

.btn.ghost {
    background: #e2e8f0;
    color: #0b1020;
}

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

/* Toggle */
.suite__toggle {
    appearance: none;
    cursor: pointer;
    background: #e2e8f0;
    color: #0b1020;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 10px;
    padding: .5rem .7rem;
    font-weight: 800;
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .18s var(--ease);
}

.suite__toggle:hover {
    background: #cbd5e1;
    transform: translateY(-1px);
}

/* ===========================
   Aparición por tarjeta + parallax (sin conflictos)
   =========================== */

/* Componer transforms: parallax + reveal */
.suitesV2 .suite {
    transform:
        translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--sc, 1)) translateY(var(--revealY, 0px)) rotate(var(--revealR, 0deg));
    opacity: var(--revealO, 1);
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .45s var(--ease),
        box-shadow .24s var(--ease),
        border-color .24s var(--ease),
        background .24s var(--ease);
    will-change: transform, opacity;
    transition-delay: var(--revealDelay, 0s), var(--revealDelay, 0s), 0s, 0s, 0s;
}

/* Fix: que .is-inview NO anule el transform compuesto */
.suitesV2.is-inview .suite {
    transform:
        translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--sc, 1)) translateY(var(--revealY, 0px)) rotate(var(--revealR, 0deg)) !important;
    opacity: var(--revealO, 1) !important;
}

/* Estado inicial de reveal */
.suitesV2 .suite.reveal-ready {
    --revealY: 18px;
    --revealR: .2deg;
    --revealO: 0;
}

/* Estado ya revelado */
.suitesV2 .suite.is-revealed {
    --revealY: 0px;
    --revealR: 0deg;
    --revealO: 1;
}

/* Hover mantiene parallax compositado */
.suitesV2.is-inview .suite:hover {
    --sc: 1.01;
}

/* Responsive: móvil 1x6 */
@media (max-width:680px) {
    .sv2-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        gap: 10px;
    }

    .suite {
        padding: 10px;
    }

    .suite__text {
        font-size: .9rem;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .suite,
    .suite__stack>.suite__pane {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}


/* ======================================
   Botones uniformes (btn.primary y suite__toggle)
   ====================================== */

/* Igualamos alto, padding y tipografía */
.btn.primary,
.suite__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* alto mínimo accesible */
    padding: .75rem 1rem;
    /* padding consistente */
    font-size: .9rem;
    /* tamaño de fuente unificado */
    font-weight: 800;
    line-height: 1;
    border-radius: 12px;
    box-sizing: border-box;
}

/* Asegura que ocupen el mismo ancho si van juntos */
.suite__footer .btn.primary,
.suite__footer .suite__toggle {
    flex: 1 1 auto;
    /* crecen de forma pareja */
    text-align: center;
    max-width: 48%;
    /* dos botones lado a lado */
}

/* En móvil, que sean full-width */
@media (max-width:680px) {

    .suite__footer .btn.primary,
    .suite__footer .suite__toggle {
        max-width: 100%;
    }
}


/* ======================================
   STACKS / TECNOLOGÍAS — FINAL CSS
   ====================================== */

:root {
    --stk-bg-top: #0b1020;
    --stk-bg-btm: #0a0d14;
    --stk-ink: #f1f5ff;
    --stk-muted: #9aa6bf;
    --stk-accent: #06b6d4;
    --stk-accent-2: #3b82f6;
    --stk-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Sección */
.section--stacksDark {
    background:
        radial-gradient(120% 140% at 20% -10%, rgba(6, 182, 212, .10), transparent 60%),
        radial-gradient(120% 140% at 90% -20%, rgba(59, 130, 246, .08), transparent 60%),
        linear-gradient(180deg, var(--stk-bg-top) 0%, var(--stk-bg-btm) 100%);
    color: var(--stk-ink);
}

.stk-container {
    display: grid;
    gap: 25px;
}

.stacks.fullscreen {
    min-block-size: 100svh;
    min-block-size: calc(var(--vh, 1vh)*100);
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    padding: clamp(14px, 2vh, 18px);
    padding-block: clamp(64px, 12vh, 120px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Spotlight dentro de la sección (sin insets negativos) */
.stacks .spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: inset(0);
    background:
        radial-gradient(420px 420px at var(--mx, 50%) var(--my, 30%), rgba(6, 182, 212, .10), transparent 62%),
        radial-gradient(600px 300px at calc(var(--mx, 50%) + 18%) calc(var(--my, 30%) + 10%), rgba(59, 130, 246, .08), transparent 72%);
    filter: blur(30px) saturate(120%);
    opacity: .85;
    transition: opacity .3s var(--stk-ease);
    z-index: 0;
}

/* Head */
.stk-head {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .35rem;
    text-align: center;
}

.stk-kicker {
    font-family: 'Sora', ui-sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .85rem;
    color: var(--stk-muted);
}

.stk-title {
    font-family: 'Sora', ui-sans-serif;
    font-weight: 800;
    line-height: 1.08;
    font-size: clamp(22px, 3.6vw, 34px);
    margin: 0;
}

.stk-title .grad {
    background: linear-gradient(90deg, var(--stk-accent), var(--stk-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stk-sub {
    color: #c6d0e3;
}

/* Tabs */
.stk-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .05);
    color: #e9efff;
    font-weight: 800;
    font-size: .88rem;
    cursor: pointer;
    user-select: none;
    transition: transform .18s var(--stk-ease), background .22s var(--stk-ease), border-color .22s var(--stk-ease);
}

.tab:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .08);
}

.tab.is-active {
    background: linear-gradient(90deg, var(--stk-accent), var(--stk-accent-2));
    color: #0b1020;
    border-color: rgba(59, 130, 246, .45);
}

/* Pane wrapper */
.stk-paneWrap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: grid;
    align-content: center;
}

.stk-pane {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: clamp(10px, 1.6vw, 16px);
    min-height: 0;
    transition: opacity .32s var(--stk-ease), transform .32s var(--stk-ease);
}

.stk-pane.is-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    position: absolute;
    inset: 0;
}

@media (max-width:1024px) {
    .stk-pane {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:720px) {
    .stk-pane {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card herramienta */
.tool {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .03));
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: clamp(12px, 2vh, 14px);
    transition: transform .22s var(--stk-ease), border-color .22s var(--stk-ease), background .22s var(--stk-ease), box-shadow .22s var(--stk-ease), opacity .22s var(--stk-ease);
    will-change: transform, opacity;
}

.tool:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 182, 212, .35);
    box-shadow: 0 10px 22px rgba(5, 10, 18, .5);
}

.tool::after {
    content: "";
    position: absolute;
    inset: -30% -70% auto -70%;
    height: 160%;
    transform: rotate(20deg) translateX(-30%);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transition: transform .7s var(--stk-ease), opacity .35s var(--stk-ease);
    pointer-events: none;
}

.tool:hover::after {
    transform: rotate(20deg) translateX(35%);
    opacity: .25;
}

.tool__title {
    font-weight: 800;
    letter-spacing: .01em;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
}

.tool__desc {
    color: #cbd5e1;
    font-size: .92rem;
    line-height: 1.45;
}

.tool__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    gap: .35rem;
    color: #dbe7ff;
    font-weight: 700;
    font-size: .75rem;
    border-radius: 999px;
    padding: .22rem .5rem;
}

.badge_1 {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(12, 12, 12, 0.519);
    background: rgba(255, 255, 255, 0.26);
    gap: .35rem;
    color: black;
    font-weight: 700;
    font-size: .75rem;
    border-radius: 999px;
    padding: .22rem .5rem;
}

/* ===== Reveal por tarjeta + parallax (composición por variables) ===== */

/* Transform compuesto: parallax + scale + reveal */
.tool {
    transform:
        translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--sc, 1)) translateY(var(--revealY, 0px)) rotate(var(--revealR, 0deg));
    opacity: var(--revealO, 1);
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .45s var(--stk-ease),
        box-shadow .24s var(--stk-ease),
        border-color .24s var(--stk-ease),
        background .24s var(--stk-ease);
    transition-delay: var(--revealDelay, 0s), var(--revealDelay, 0s), 0s, 0s, 0s;
}

/* Estado inicial (antes de revelar) */
.tool.reveal-ready {
    --revealY: 18px;
    --revealR: .2deg;
    --revealO: 0;
}

/* Estado revelado */
.tool.is-revealed {
    --revealY: 0px;
    --revealR: 0deg;
    --revealO: 1;
}

/* Fix: que .is-inview no anule el transform compuesto */
.stacks.is-inview .tool {
    transform:
        translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--sc, 1)) translateY(var(--revealY, 0px)) rotate(var(--revealR, 0deg)) !important;
    opacity: var(--revealO, 1) !important;
}

.stacks.is-inview .tool:hover {
    --sc: 1.01;
}

@media (max-width:680px) {
    .tool {
        padding: 10px;
    }

    .tool__desc {
        font-size: .9rem;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {

    .tool,
    .stk-pane,
    .stacks .spotlight {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}



/* ===== FIX DOBLE SCROLL (autoridad del scroll + fullscreen sin overflow) ===== */

/* 1) Normalización y autoridad del scroll */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* Sólo el body puede desplazarse verticalmente */
html {
    overflow-y: hidden;
}

/* evita 2 barras (html + body) */
body {
    overflow-y: auto;
    overflow-x: clip;
}

/* sin horizontal y sin 2ª barra */

/* 2) Secciones fullscreen NO deben crear su propio scroll interno */
.section.fullscreen,
.suitesV2.fullscreen,
.clientsV3.fullscreen,
.stacks.fullscreen,
.hero {
    /* evita scroll interno accidental por 1–2px de padding/efectos */
    overflow: clip;
    /* mejor que hidden para evitar barras */
    min-height: 100vh;
    /* una sola definición, sin duplicar */
}

/* Si usabas la variable --vh, mantenla SOLO como fallback móvil: */
@supports (height: 100dvh) {

    .section.fullscreen,
    .suitesV2.fullscreen,
    .clientsV3.fullscreen,
    .stacks.fullscreen,
    .hero {
        min-height: 100dvh;
    }
}

/* 3) Spotlight y capas visuales: nunca deben desbordar el contenedor */
.stacks .spotlight {
    inset: 0;
    clip-path: inset(0);
}

.clientsV3 .cv3-belt {
    overflow: clip;
}

/* por si usas la marquesina */

/* 4) Contenedores centrados: ancho fijo para evitar “toques” al borde */
.stk-container,
.cv3-head,
.cv3-grid,
.sv2-head,
.sv2-grid,
.hero__inner {
    width: min(1200px, 92%);
    margin-inline: auto;
}

/* 5) Nada de overflow-y:auto en panes de contenido */
.stk-paneWrap,
.cv3-grid {
    overflow: visible;
}

/* 6) Pequeñas tolerancias para evitar 1px de crecimiento por bordes/sombras */
.tool,
.suite,
.logoCard {
    contain: layout paint;
}

/* =========================================
   CONTACTO — V1 (fullscreen, light, sin scroll interno)
   ========================================= */

:root {
    --ct-ink: #0b1020;
    --ct-muted: #475569;
    --ct-bg-top: #f6f8fc;
    --ct-bg-btm: #eef2f9;
    --ct-primary: #3b82f6;
    --ct-primary-2: #60a5fa;
    --ct-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Fondo claro para contrastar con la sección anterior */
.section--contactLight {
    background:
        radial-gradient(120% 140% at 12% -10%, rgba(15, 23, 42, .06), transparent 60%),
        linear-gradient(180deg, var(--ct-bg-top) 0%, var(--ct-bg-btm) 100%);
    color: var(--ct-ink);
}

.contact.fullscreen {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: clip;
    /* evita scroll interno */
    display: grid;
    align-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
}

.ct-container {
    width: min(1200px, 92%);
    margin-inline: auto;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(14px, 2vh, 18px);
}

/* Head */
.ct-head {
    display: grid;
    gap: .4rem;
    text-align: center;
}

.ct-kicker {
    font-family: 'Sora', ui-sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .9rem;
    color: #334155;
    opacity: .9;
}

.ct-title {
    font-family: 'Sora', ui-sans-serif;
    font-weight: 800;
    line-height: 1.08;
    font-size: clamp(24px, 3.8vw, 36px);
    margin: 0;
}

.ct-title .grad {
    background: linear-gradient(90deg, var(--ct-primary-2), var(--ct-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ct-sub {
    color: var(--ct-muted);
}

/* Layout 2 columnas (form + info) */
.ct-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(14px, 2vw, 24px);
    align-items: start;
}

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

/* Tarjetas */
.ct-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    padding: clamp(14px, 2.2vh, 18px);
}

/* Formulario */
.ct-form {
    display: grid;
    gap: 12px;
}

.ct-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
    .ct-row {
        grid-template-columns: 1fr;
    }
}

.ct-field {
    display: grid;
    gap: 6px;
}

.ct-label {
    font-weight: 800;
    font-size: .92rem;
    color: #0f172a;
}

.ct-input,
.ct-textarea,
.ct-select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #f8fafc;
    padding: .85rem .95rem;
    font: inherit;
    color: var(--ct-ink);
    transition: border-color .2s var(--ct-ease), box-shadow .2s var(--ct-ease), background .2s var(--ct-ease);
}

.ct-textarea {
    min-height: 140px;
    resize: vertical;
}

.ct-input:focus,
.ct-textarea:focus,
.ct-select:focus {
    outline: none;
    border-color: rgba(59, 130, 246, .45);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
    background: #fff;
}

/* Ayudas / errores */
.ct-help {
    font-size: .82rem;
    color: #64748b;
}

.ct-errorText {
    font-size: .85rem;
    color: #be123c;
    display: none;
}

.is-invalid .ct-input,
.is-invalid .ct-textarea {
    border-color: #be123c;
}

.is-invalid .ct-errorText {
    display: block;
}

/* Acciones */
.ct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    border: 1px solid rgba(15, 23, 42, .12);
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s var(--ct-ease), background .24s var(--ct-ease), border-color .24s var(--ct-ease), opacity .2s var(--ct-ease);
}

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

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.btn.primary {
    background: linear-gradient(90deg, var(--ct-primary), var(--ct-primary-2));
    border-color: rgba(96, 165, 250, .45);
    color: #0b1020;
}

.btn.ghost.green {
    background: #25d366;
    color: #0b1020;
}

.ct-actions .btn {
    flex: 1; 
    min-width: 120px; 
}


/* Loader inline del botón */
.btn .spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-top-color: rgba(11, 16, 32, .7);
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mensajes */
.ct-status {
    display: none;
    margin-top: 8px;
    font-weight: 700;
    text-align: center;
}

.ct-status.ok {
    color: #15803d;
}

.ct-status.err {
    color: #b91c1c;
}

.ct-status.show {
    display: block;
}

/* Info lateral */
.ct-info {
    display: grid;
    gap: 12px;
}

.ct-block {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 14px;
    padding: 12px;
}

.ct-block h4 {
    margin: 0 0 6px 0;
    font-weight: 800;
}

.ct-list {
    margin: 0;
    padding-left: 1.1rem;
    color: #334155;
}

.ct-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kpi {
    text-align: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px;
    padding: 10px;
}

.kpi .num {
    font-weight: 800;
    font-size: 1.1rem;
    background: linear-gradient(90deg, var(--ct-primary-2), var(--ct-primary));
    -webkit-background-clip: text;
    color: transparent;
}

.kpi .lbl {
    font-size: .8rem;
    color: #64748b;
}

/* ===== CONTACTO — Aparición por elemento con stagger ===== */

/* 1) Estado base: componemos transform existente con capa de reveal */
.contact .reveal-target {
    /* añade la capa de entrada sin pisar otros transforms */
    transform: translateY(var(--revealY, 0)) rotate(var(--revealR, 0deg));
    opacity: var(--revealO, 1);

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .45s var(--ct-ease),
        box-shadow .24s var(--ct-ease),
        border-color .24s var(--ct-ease),
        background .24s var(--ct-ease);

    /* el delay lo inyecta JS vía var(--revealDelay) */
    transition-delay: var(--revealDelay, 0s);
    will-change: transform, opacity;
}

/* 2) Estado inicial antes de revelar */
.contact .reveal-ready {
    --revealY: 18px;
    /* pequeño lift */
    --revealR: .2deg;
    /* micro respiro */
    --revealO: 0;
}

/* 3) Estado ya revelado */
.contact .is-revealed {
    --revealY: 0px;
    --revealR: 0deg;
    --revealO: 1;
}

/* 5) Reduce motion: aparece sin animar */
@media (prefers-reduced-motion: reduce) {
    .contact .reveal-target {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* ===== STK TABS — Carrusel infinito estable (sin auto-scroll, sin drag JS) ===== */
.stk-tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* una sola fila */
    gap: 8px;
    overflow-x: auto;
    /* scroll horizontal nativo */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* no frena los clics */
    padding-inline: 12px;
    scrollbar-width: none;
}

.stk-tabs::-webkit-scrollbar {
    display: none;
}

/* Ítems */
.stk-tabs .tab {
    flex: 0 0 auto;
    scroll-snap-align: center;
    user-select: none;
}

/* Velos laterales (solo visual). OJO: pointer-events none para no bloquear clics */
.stk-tabs::before,
.stk-tabs::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg, rgba(11, 16, 32, .35), transparent);
    opacity: .15;
}

.stk-tabs::before {
    left: 0;
    transform: scaleX(-1);
}

.stk-tabs::after {
    right: 0;
}

/* Auto-scroll: desactiva el snap mientras se mueve solo (evita “tirones”) */
.stk-tabs.no-snap {
    scroll-snap-type: none !important;
}

/* =========================================
   FOOTER V2 — Dark, responsive, con CTA
   ========================================= */

:root {
    --ft-bg-top: #0a0d14;
    --ft-bg-btm: #0a0f1a;
    --ft-ink: #f1f5ff;
    --ft-muted: #9aa6bf;
    --ft-line: rgba(255, 255, 255, .08);
    --ft-accent: #3b82f6;
    --ft-accent-2: #60a5fa;
    --ft-ease: cubic-bezier(.22, .61, .36, 1);
}

.site-footer {
    background:
        radial-gradient(120% 160% at 10% -10%, rgba(59, 130, 246, .08), transparent 60%),
        radial-gradient(120% 160% at 90% -20%, rgba(96, 165, 250, .06), transparent 60%),
        linear-gradient(180deg, var(--ft-bg-top) 0%, var(--ft-bg-btm) 100%);
    color: var(--ft-ink);
    position: relative;
    overflow: clip;
    /* sin desborde */
}

.site-footer {
    scroll-snap-align: end;
    /* el final del footer se alinea al viewport */
    scroll-snap-stop: always;
    /* garantiza que “se detenga” aquí */
    min-height: auto;
    /* que ocupe su alto natural */
}


.ft-container {
    width: min(1200px, 92%);
    margin-inline: auto;
    padding: clamp(20px, 4vh, 36px) 0;
    display: grid;
    gap: clamp(18px, 3vh, 26px);
}

/* Cinta superior sutil */
.ft-topline {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--ft-line), transparent);
}

/* GRID principal */
.ft-grid {
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr 1.2fr;
    gap: clamp(14px, 2vw, 28px);
    align-items: start;
}

@media (max-width: 980px) {
    .ft-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .ft-grid {
        grid-template-columns: 1fr;
    }
}

/* Columna brand */
.ft-brand {
    display: grid;
    gap: 10px;
}

.ft-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: .95;
}

.ft-logo img {
    height: 34px;
    width: auto;
}

.ft-mission {
    color: var(--ft-muted);
}

/* Títulos de columna */
.ft-title {
    font-weight: 800;
    letter-spacing: .02em;
    margin: 0 0 8px 0;
}

/* Listas de enlaces */
.ft-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.ft-link {
    color: var(--ft-ink);
    text-decoration: none;
    opacity: .9;
    border-bottom: 1px dashed transparent;
    transition: opacity .18s var(--ft-ease), border-color .18s var(--ft-ease), transform .18s var(--ft-ease);
}

.ft-link:hover {
    opacity: 1;
    border-color: var(--ft-line);
    transform: translateX(2px);
}

/* Newsletter */
.ft-news {
    display: grid;
    gap: 10px;
}

.ft-note {
    color: var(--ft-muted);
}

.ft-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ft-input {
    flex: 1 1 220px;
    border-radius: 12px;
    border: 1px solid var(--ft-line);
    background: rgba(255, 255, 255, .06);
    color: var(--ft-ink);
    padding: .85rem .95rem;
    font: inherit;
    transition: border-color .2s var(--ft-ease), background .2s var(--ft-ease), box-shadow .2s var(--ft-ease);
}

.ft-input::placeholder {
    color: #cbd5e1;
    opacity: .7;
}

.ft-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, .45);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    background: rgba(255, 255, 255, .08);
}

.ft-btn {
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, .45);
    background: linear-gradient(90deg, var(--ft-accent), var(--ft-accent-2));
    color: #0b1020;
    font-weight: 800;
    padding: .9rem 1.1rem;
    cursor: pointer;
    transition: transform .16s var(--ft-ease);
}

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

/* Redes */
.ft-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ft-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--ft-line);
    background: rgba(255, 255, 255, .05);
    color: var(--ft-ink);
    text-decoration: none;
    transition: transform .16s var(--ft-ease), background .2s var(--ft-ease), border-color .2s var(--ft-ease);
}

.ft-social a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
}

/* Línea y barra inferior */
.ft-bottom {
    border-top: 1px solid var(--ft-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    color: var(--ft-muted);
    font-size: .92rem;
}

.ft-legal {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ft-legal a {
    color: var(--ft-muted);
    text-decoration: none;
}

.ft-legal a:hover {
    text-decoration: underline;
}

/* Back to top */
.ft-top {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 12px;
    border: 1px solid var(--ft-line);
    background: rgba(255, 255, 255, .06);
    color: var(--ft-ink);
    padding: .6rem .9rem;
    text-decoration: none;
    transition: transform .16s var(--ft-ease), background .2s var(--ft-ease);
}

.ft-top:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .08);
}

/* Aparición suave */
.site-footer:not(.is-inview) .ft-grid,
.site-footer:not(.is-inview) .ft-bottom {
    opacity: 0;
    transform: translateY(14px);
}

.site-footer.is-inview .ft-grid,
.site-footer.is-inview .ft-bottom {
    opacity: 1;
    transform: none;
    transition: opacity .4s var(--ft-ease), transform .4s var(--ft-ease);
}

/* Transiciones suaves */
.header-menu-toggle,
.site-logo {
    transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* Aseguramos un “chip” detrás del logo para que se note el cambio */
.site-logo {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    /* ajuste ligero */
    border-radius: 12px;
    background: transparent;
    /* default */
    border: 1px solid transparent;
}

/* Estado normal (como ya lo tienes) */
.header-menu-toggle {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* Estado “oscuro” cuando el body tenga la bandera */
.header-dark .header-menu-toggle,
.header-dark .site-logo {
    background: #000;
    /* lo que pediste */
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}