:root {
    --motion-enter: cubic-bezier(.22,1,.36,1);
    --motion-exit: cubic-bezier(.4,0,1,1);
}

/* Intro de primera carga: visual premium, ligero y sin bloquear contenido SEO. */
.app-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 46%, rgba(var(--condos-green-rgb),0.10), transparent 19rem),
        linear-gradient(180deg, #fbfdfc 0%, var(--color-surface-soft) 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 420ms var(--motion-enter), visibility 420ms linear;
    animation: app-intro-fallback 320ms var(--motion-enter) 3.6s forwards;
}

.app-intro::before {
    content: "";
    position: absolute;
    width: min(46rem, 80vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(var(--condos-green-rgb),0.06);
    box-shadow:
        0 0 0 4.5rem rgba(var(--condos-green-rgb),0.020),
        0 0 0 9rem rgba(var(--condos-mint-rgb),0.014);
}

.app-intro__ambient {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    opacity: 0.45;
}

.app-intro__ambient--one {
    top: 12%;
    left: 12%;
    background: radial-gradient(circle, rgba(var(--condos-green-rgb),0.11), transparent 68%);
}

.app-intro__ambient--two {
    right: 10%;
    bottom: 8%;
    background: radial-gradient(circle, rgba(var(--condos-mint-rgb),0.085), transparent 68%);
}

.app-intro__content {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    min-width: 15rem;
    animation: app-intro-content-in 520ms var(--motion-enter) both;
}

.app-intro__mark-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 6.3rem;
    height: 6.3rem;
    margin-bottom: 0.18rem;
}

.app-intro__mark-shell {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,247,252,0.98));
    border: 1px solid rgba(var(--condos-green-rgb),0.11);
    box-shadow:
        0 18px 45px rgba(var(--condos-dark-rgb),0.10),
        inset 0 1px 0 rgba(255,255,255,0.95);
}

.app-intro__mark-shell img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    animation: app-intro-mark 840ms var(--motion-enter) both;
}

.app-intro__orbit {
    position: absolute;
    inset: 0.35rem;
    border-radius: 50%;
    border: 1px solid rgba(var(--condos-green-rgb),0.14);
    animation: app-intro-orbit 3.8s linear infinite;
}

.app-intro__orbit::after {
    content: "";
    position: absolute;
    top: -0.2rem;
    left: 50%;
    width: 0.42rem;
    height: 0.42rem;
    margin-left: -0.21rem;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 0.28rem rgba(var(--condos-green-rgb),0.09);
}

.app-intro__orbit--two {
    inset: 0.78rem;
    border-color: rgba(var(--condos-mint-rgb),0.12);
    animation-duration: 5.2s;
    animation-direction: reverse;
}

.app-intro__orbit--two::after {
    background: var(--color-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--condos-mint-rgb),0.075);
}

.app-intro__brand {
    color: var(--color-ink);
    font-size: 1.58rem;
    font-weight: 830;
    letter-spacing: -0.052em;
}

.app-intro__caption {
    color: var(--color-slate-600);
    font-size: 0.68rem;
    font-weight: 720;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.app-intro__tip {
    width: min(35rem, calc(100vw - 3rem));
    min-height: 4.6rem;
    margin-top: 0.72rem;
    padding-top: 0.82rem;
    border-top: 1px solid rgba(var(--condos-green-rgb),0.12);
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    animation: app-intro-tip-in 520ms var(--motion-enter) 220ms forwards;
}

.app-intro__tip-label {
    display: block;
    color: var(--color-slate-600);
    font-size: 0.64rem;
    font-weight: 760;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.app-intro__tip-label strong {
    color: var(--color-primary-strong);
    font: inherit;
}

.app-intro__tip p {
    max-width: 33rem;
    margin: 0.42rem auto 0;
    color: var(--color-ink);
    font-size: clamp(0.78rem, 1.5vw, 0.86rem);
    font-weight: 610;
    line-height: 1.48;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.app-intro__progress {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    margin-top: 0.5rem;
}

.app-intro__progress span {
    width: 1.5rem;
    height: 0.18rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--condos-green-rgb),0.10);
}

.app-intro__progress span::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-bright));
    transform: scaleX(0);
    transform-origin: left;
    animation: app-intro-progress 1.15s var(--motion-enter) forwards;
}

.app-intro__progress span:nth-child(2)::after { animation-delay: 650ms; }
.app-intro__progress span:nth-child(3)::after { animation-delay: 1.3s; }

.app-intro.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.app-intro.is-leaving .app-intro__content {
    transform: translateY(-5px) scale(0.985);
    opacity: 0;
    transition: transform 360ms var(--motion-enter), opacity 260ms ease;
}

.app-intro.is-skipped,
.app-intro[hidden] { display: none !important; }

/* Primera entrada del header. */
.public-header__brand,
.public-header__nav,
.public-header__actions {
    animation: motion-header-enter 720ms var(--motion-enter) both;
}
.public-header__brand { animation-delay: 80ms; }
.public-header__nav { animation-delay: 145ms; }
.public-header__actions { animation-delay: 210ms; }

/* Secuencia premium del hero inicial. */
.hero-section__eyebrow {
    animation: motion-fade-up 720ms var(--motion-enter) 170ms both;
}

.hero-section__headline-mask:first-child .hero-section__headline-line {
    animation: motion-headline-enter 920ms var(--motion-enter) 215ms both;
}

.hero-section__headline-mask:nth-child(2) .hero-section__headline-line {
    animation: motion-headline-enter 960ms var(--motion-enter) 300ms both;
}

.hero-section__lead {
    animation: motion-fade-up 820ms var(--motion-enter) 410ms both;
}

.hero-section__actions {
    animation: motion-fade-up 820ms var(--motion-enter) 500ms both;
}

.hero-section__signal-line {
    animation: motion-fade-up 820ms var(--motion-enter) 585ms both;
}

.hero-section__visual {
    animation: motion-visual-enter 1100ms var(--motion-enter) 230ms both;
}

.hero-section__rail {
    animation: motion-fade-up 900ms var(--motion-enter) 690ms both;
}

/* Reveal direccional global. El HTML queda visible si JS no arranca. */
.motion-reveal {
    opacity: 1;
    transform: none;
}

.motion-enhanced .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale(.985);
    transition:
        opacity 620ms var(--motion-enter),
        transform 760ms var(--motion-enter);
}

.motion-enhanced .motion-reveal.motion-from-top:not(.is-visible) {
    transform: translate3d(0, -46px, 0) scale(.985);
}

.motion-enhanced .motion-reveal.motion-from-bottom:not(.is-visible) {
    transform: translate3d(0, 48px, 0) scale(.985);
}

.motion-enhanced .motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.motion-enhanced .motion-reveal.motion-immediate,
.motion-enhanced .motion-reveal.motion-immediate .motion-item {
    transition: none !important;
}

.motion-enhanced .motion-reveal .motion-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.992);
    transition:
        opacity 520ms var(--motion-enter),
        transform 650ms var(--motion-enter);
}

.motion-enhanced .motion-reveal.motion-from-top:not(.is-visible) .motion-item {
    transform: translate3d(0, -22px, 0) scale(.992);
}

.motion-enhanced .motion-reveal.motion-from-bottom:not(.is-visible) .motion-item {
    transform: translate3d(0, 24px, 0) scale(.992);
}

.motion-enhanced .motion-reveal.is-visible .motion-item {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: calc(var(--motion-index, 0) * 48ms);
}

.motion-enhanced .motion-reveal:not(.is-visible) .motion-item {
    transition-delay: 0ms;
}

/* Familias de motion por composición. Mantienen el reveal bidireccional sin repetir la misma entrada. */
.motion-enhanced .motion-reveal[data-motion-family="split"] {
    transform: none;
}

.motion-enhanced .motion-reveal[data-motion-family="split"] .motion-item:nth-of-type(odd),
.motion-enhanced .motion-reveal[data-motion-family="split"] [data-motion-stagger] > .motion-item:nth-child(odd) {
    transform: translate3d(-30px, 0, 0);
}

.motion-enhanced .motion-reveal[data-motion-family="split"] .motion-item:nth-of-type(even),
.motion-enhanced .motion-reveal[data-motion-family="split"] [data-motion-stagger] > .motion-item:nth-child(even) {
    transform: translate3d(30px, 0, 0);
}

.motion-enhanced .motion-reveal[data-motion-family="scene"] {
    transform: translate3d(0, 26px, 0) scale(.97);
}

.motion-enhanced .motion-reveal[data-motion-family="scene"].motion-from-top:not(.is-visible) {
    transform: translate3d(0, -24px, 0) scale(.97);
}

.motion-enhanced .motion-reveal[data-motion-family="scene"] .motion-item {
    transform: translate3d(0, 18px, 0) scale(.975);
}

.motion-enhanced .motion-reveal[data-motion-family="timeline"] {
    transform: none;
}

.motion-enhanced .motion-reveal[data-motion-family="timeline"] .motion-item {
    transform: translate3d(32px, 0, 0);
}

.motion-enhanced .motion-reveal[data-motion-family="timeline"].motion-from-top:not(.is-visible) .motion-item {
    transform: translate3d(-28px, 0, 0);
}

.motion-enhanced .motion-reveal[data-motion-family="scale"] {
    transform: none;
}

.motion-enhanced .motion-reveal[data-motion-family="scale"] .motion-item {
    transform: translate3d(0, 34px, 0) scale(.98);
}

.motion-enhanced .motion-reveal[data-motion-family="rise"] {
    transform: none;
}

.motion-enhanced .motion-reveal[data-motion-family="rise"] .motion-item {
    transform: translate3d(0, 30px, 0);
}

.motion-enhanced .motion-reveal[data-motion-family="accordion"] {
    transform: none;
}

.motion-enhanced .motion-reveal[data-motion-family="accordion"] .motion-item {
    transform: translate3d(0, 14px, 0);
}

.motion-enhanced .motion-reveal[data-motion-family].is-visible .motion-item {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}

/* Heroes públicos: comparten un contrato de motion, no una composición visual. */
.motion-enhanced [data-motion-hero].motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

.motion-enhanced [data-motion-hero].motion-reveal [data-motion-hero-copy] > .motion-item {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
        opacity 600ms var(--motion-enter),
        transform 780ms var(--motion-enter);
}

.motion-enhanced [data-motion-hero].motion-reveal.motion-from-top:not(.is-visible) [data-motion-hero-copy] > .motion-item {
    transform: translate3d(0, -24px, 0);
}

.motion-enhanced [data-motion-hero].motion-reveal [data-motion-hero-visual] {
    opacity: 0;
    transform: translate3d(52px, 18px, 0) scale(.968);
    transition:
        opacity 700ms var(--motion-enter),
        transform 920ms var(--motion-enter);
}

.motion-enhanced [data-motion-hero].motion-reveal.motion-from-top:not(.is-visible) [data-motion-hero-visual] {
    transform: translate3d(-28px, -10px, 0) scale(.982);
}

.motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-copy] > .motion-item,
.motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-visual] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-copy] > .motion-item {
    transition-delay: calc(80ms + (var(--motion-index, 0) * 64ms));
}

.motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-visual] {
    transition-delay: 190ms;
}

/* En heroes split la segunda mitad entra con mayor profundidad; scene prioriza escala. */
.motion-enhanced [data-motion-hero][data-motion-family="split"].motion-reveal [data-motion-hero-visual] {
    transform: translate3d(44px, 10px, 0) scale(.985);
}

.motion-enhanced [data-motion-hero][data-motion-family="scene"].motion-reveal [data-motion-hero-visual] {
    transform: translate3d(24px, 18px, 0) scale(.955);
}

.motion-enhanced [data-motion-hero][data-motion-family="split"].motion-reveal.is-visible [data-motion-hero-visual],
.motion-enhanced [data-motion-hero][data-motion-family="scene"].motion-reveal.is-visible [data-motion-hero-visual] {
    transform: translate3d(0, 0, 0) scale(1);
}

/* Microinteracciones globales del sitio público. */
main .button,
main a[class*="__cta"],
main article,
main aside {
    transition:
        transform 260ms var(--motion-enter),
        box-shadow 260ms var(--motion-enter),
        border-color 260ms var(--motion-enter),
        background-color 260ms var(--motion-enter);
}

main .button:hover,
main a[class*="__cta"]:hover {
    transform: translateY(-2px);
}

main .button:active,
main a[class*="__cta"]:active {
    transform: scale(.985);
}

@keyframes motion-header-enter {
    from { opacity: 0; transform: translate3d(0,-10px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes motion-fade-up {
    from { opacity: 0; transform: translate3d(0,18px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes motion-headline-enter {
    from { opacity: 0; transform: translate3d(0,110%,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes motion-visual-enter {
    from { opacity: 0; transform: translate3d(28px,12px,0) scale(0.975); }
    to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes app-intro-content-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes app-intro-mark {
    from { opacity: 0; transform: scale(0.82) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes app-intro-orbit {
    to { transform: rotate(360deg); }
}

@keyframes app-intro-tip-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes app-intro-progress {
    0% { transform: scaleX(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes app-intro-fallback {
    to { opacity: 0; visibility: hidden; }
}

@media (max-width: 520px) {
    .app-intro__content {
        min-width: 0;
        width: 100%;
        padding-inline: 1rem;
    }

    .app-intro__mark-stage {
        width: 5.7rem;
        height: 5.7rem;
    }

    .app-intro__mark-shell {
        width: 4.35rem;
        height: 4.35rem;
        border-radius: 1.35rem;
    }

    .app-intro__tip {
        width: min(100%, 30rem);
        min-height: 5.2rem;
        margin-top: 0.58rem;
        padding-top: 0.72rem;
    }

    .app-intro__tip p {
        max-width: 20rem;
        line-height: 1.44;
    }
}

@media (max-height: 500px) {
    .app-intro__content { gap: 0.28rem; }

    .app-intro__mark-stage {
        width: 4.55rem;
        height: 4.55rem;
        margin-bottom: 0;
    }

    .app-intro__mark-shell {
        width: 3.55rem;
        height: 3.55rem;
        border-radius: 1.05rem;
    }

    .app-intro__mark-shell img {
        width: 2.15rem;
        height: 2.15rem;
    }

    .app-intro__tip {
        min-height: 0;
        margin-top: 0.3rem;
        padding-top: 0.45rem;
    }

    .app-intro__tip p { margin-top: 0.28rem; }
    .app-intro__progress { margin-top: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .app-intro { display: none !important; }

    .public-header__brand,
    .public-header__nav,
    .public-header__actions,
    .hero-section__eyebrow,
    .hero-section__headline-line,
    .hero-section__lead,
    .hero-section__actions,
    .hero-section__signal-line,
    .hero-section__visual,
    .hero-section__rail {
        animation: none !important;
    }

    .motion-reveal,
    .motion-reveal.is-visible,
    .motion-item,
    [data-motion-hero-copy],
    [data-motion-hero-visual] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Mobile: el motion acompaña la lectura, nunca desplaza contenido fuera del viewport. */
@media (max-width: 900px) {
    .hero-section__visual {
        animation-name: motion-fade-up;
        animation-duration: 880ms;
    }

    .motion-enhanced .motion-reveal,
    .motion-enhanced .motion-reveal[data-motion-family] {
        transform: translate3d(0, 24px, 0) scale(.992);
    }

    .motion-enhanced .motion-reveal.motion-from-top:not(.is-visible),
    .motion-enhanced .motion-reveal[data-motion-family].motion-from-top:not(.is-visible) {
        transform: translate3d(0, -22px, 0) scale(.992);
    }

    .motion-enhanced .motion-reveal.motion-from-bottom:not(.is-visible),
    .motion-enhanced .motion-reveal[data-motion-family].motion-from-bottom:not(.is-visible) {
        transform: translate3d(0, 24px, 0) scale(.992);
    }

    .motion-enhanced .motion-reveal[data-motion-family] .motion-item,
    .motion-enhanced .motion-reveal[data-motion-family="split"] .motion-item:nth-of-type(odd),
    .motion-enhanced .motion-reveal[data-motion-family="split"] .motion-item:nth-of-type(even),
    .motion-enhanced .motion-reveal[data-motion-family="split"] [data-motion-stagger] > .motion-item:nth-child(odd),
    .motion-enhanced .motion-reveal[data-motion-family="split"] [data-motion-stagger] > .motion-item:nth-child(even),
    .motion-enhanced .motion-reveal[data-motion-family="timeline"] .motion-item,
    .motion-enhanced .motion-reveal[data-motion-family="scale"] .motion-item,
    .motion-enhanced .motion-reveal[data-motion-family="rise"] .motion-item,
    .motion-enhanced .motion-reveal[data-motion-family="accordion"] .motion-item {
        transform: translate3d(0, 16px, 0) scale(.996);
    }

    .motion-enhanced .motion-reveal[data-motion-family].motion-from-top:not(.is-visible) .motion-item,
    .motion-enhanced .motion-reveal[data-motion-family="timeline"].motion-from-top:not(.is-visible) .motion-item {
        transform: translate3d(0, -14px, 0) scale(.996);
    }

    .motion-enhanced .motion-reveal.is-visible,
    .motion-enhanced .motion-reveal[data-motion-family].is-visible,
    .motion-enhanced .motion-reveal[data-motion-family].is-visible .motion-item {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .motion-enhanced .motion-reveal.is-visible .motion-item {
        transition-delay: calc(var(--motion-index, 0) * 34ms);
    }

    .motion-enhanced [data-motion-hero].motion-reveal [data-motion-hero-copy] > .motion-item,
    .motion-enhanced [data-motion-hero].motion-reveal [data-motion-hero-visual],
    .motion-enhanced [data-motion-hero][data-motion-family="split"].motion-reveal [data-motion-hero-visual],
    .motion-enhanced [data-motion-hero][data-motion-family="scene"].motion-reveal [data-motion-hero-visual] {
        transform: translate3d(0, 16px, 0) scale(.996);
    }

    .motion-enhanced [data-motion-hero].motion-reveal.motion-from-top:not(.is-visible) [data-motion-hero-copy] > .motion-item,
    .motion-enhanced [data-motion-hero].motion-reveal.motion-from-top:not(.is-visible) [data-motion-hero-visual] {
        transform: translate3d(0, -14px, 0) scale(.996);
    }

    .motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-copy] > .motion-item,
    .motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-visual] {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .motion-enhanced [data-motion-hero].motion-reveal.is-visible [data-motion-hero-copy] > .motion-item {
        transition-delay: calc(40ms + (var(--motion-index, 0) * 38ms));
    }
}

@media (max-width: 420px) {
    .motion-enhanced .motion-reveal,
    .motion-enhanced .motion-reveal[data-motion-family] {
        transform: translate3d(0, 18px, 0) scale(.996);
    }

    .motion-enhanced .motion-reveal.motion-from-top:not(.is-visible),
    .motion-enhanced .motion-reveal[data-motion-family].motion-from-top:not(.is-visible) {
        transform: translate3d(0, -16px, 0) scale(.996);
    }
}