/* Interior heroes: one photographic language across every route, while the home carousel stays unchanged. */
.product-detail-intro .page-intro-photo { min-height: 0; }
.product-detail-intro .page-intro-inner { padding-bottom: var(--space-5); }
.product-detail-intro .page-intro-copy { margin-block: 0; padding-block: var(--space-5); }
.product-detail-intro .hero-scroll-cue { display: none; }

.page-intro-photo {
    position: relative;
    isolation: isolate;
    display: block;
    min-height: min(820px,100dvh);
    padding: 0;
    overflow: hidden;
    background: #080a0e;
    color: #fff
}

.page-intro-media, .page-intro-media img, .page-intro-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.page-intro-media {
    margin: 0;
    overflow: hidden
}

    .page-intro-media img {
        max-width: none;
        object-fit: cover;
        object-position: 68% center;
        filter: saturate(.84) contrast(1.05) brightness(.76);
        -webkit-user-drag: none;
        user-select: none
    }

.page-intro-photo-kiosku .page-intro-media img {
    object-position: 62% center
}

.page-intro-photo-datos-bi .page-intro-media img {
    object-position: 66% center
}

.page-intro-photo-ia-automatizacion .page-intro-media img {
    object-position: 64% center
}

.page-intro-shade {
    z-index: 1;
    background: linear-gradient(90deg,rgb(5 7 10 / .97) 0%,rgb(5 7 10 / .88) 34%,rgb(5 7 10 / .58) 56%,rgb(5 7 10 / .16) 82%,rgb(5 7 10 / .08) 100%),linear-gradient(180deg,rgb(5 7 10 / .12),transparent 48%,rgb(5 7 10 / .72));
    pointer-events: none
}

.page-intro-inner {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: inherit;
    flex-direction: column;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: clamp(52px,7vw,78px)
}

.page-intro-photo .breadcrumbs {
    margin-bottom: 0;
    color: #c5ceda
}

.page-intro-photo .breadcrumb-trail a, .page-intro-photo .breadcrumb-back {
    color: #d7dde6
}

.page-intro-photo .breadcrumb-current {
    color: #f1f4f8
}

    .page-intro-photo .breadcrumb-current::before {
        background: #bca7ff
    }

.page-intro-photo .breadcrumb-back:hover, .page-intro-photo .breadcrumb-trail a:hover {
    color: #fff
}

.page-intro-copy {
    width: min(960px,100%);
    margin-block: auto;
    padding-block: clamp(40px,6vh,72px)
}

    .page-intro-copy > .eyebrow {
        margin-bottom: 22px;
        color: #d4d9e2;
        text-shadow: 0 1px 18px #000
    }

.page-intro-photo h1 {
    max-width: 960px;
    color: #fff;
    font-size: clamp(46px,5vw,70px);
    line-height: 1.06;
    letter-spacing: -.055em;
    text-shadow: 0 2px 30px rgb(0 0 0 / .42)
}

.page-intro-photo .muted-heading {
    color: #bcc5d1
}

.page-intro-photo .blue-heading {
    color: #8bbcff
}

.page-intro-photo .intro-description {
    max-width: 680px;
    margin-top: 24px;
    color: #edf1f6;
    font-size: 17px;
    line-height: 1.72;
    text-shadow: 0 1px 18px #000
}

.page-intro-copy > .button {
    margin-top: 28px
}

/* Contact keeps its focused form below the new shared hero. */
.contact-page {
    padding-top: var(--section-space)
}

.contact-copy .contact-aside {
    margin-top: 0
}

.contact-page > .contact-form-panel {
    grid-row: 1
}

/* Utility routes use the same approved imagery without duplicating the full page-intro component. */
.error-page-photo {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    min-height: min(820px,100dvh);
    margin: 0;
    padding: max(calc(var(--header-height) + 64px),14dvh) max(var(--gutter),calc((100vw - var(--container))/2)) clamp(96px,14dvh,150px);
    overflow: hidden;
    background-position: 68% center;
    background-size: cover;
    color: #fff
}

    .error-page-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg,rgb(5 7 10 / .97) 0%,rgb(5 7 10 / .86) 42%,rgb(5 7 10 / .2) 100%),linear-gradient(180deg,rgb(5 7 10 / .16),rgb(5 7 10 / .68))
    }

.error-page-not-found {
    background-image: url("/images/hero/integraciones-1672.jpg")
}

.error-page-error {
    background-image: url("/images/hero/ia-automatizacion-1672.jpg")
}

.error-page-photo h1 {
    max-width: 850px;
    color: #fff;
    text-shadow: 0 2px 30px rgb(0 0 0 / .42)
}

.error-page-photo .muted-heading {
    color: #bcc5d1
}

.error-page-photo > p:not(.eyebrow) {
    max-width: 660px;
    color: #edf1f6;
    text-shadow: 0 1px 18px #000
}

.error-page-photo a:not(.button) {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px
}

/* The light theme retains visible photography while protecting graphite text. */
:root[data-theme="light"] .page-intro-photo {
    background: #e9edf3;
    color: #172033
}

:root[data-theme="light"] .page-intro-media img {
    filter: saturate(.9) contrast(1.04) brightness(.99)
}

:root[data-theme="light"] .page-intro-shade {
    background: linear-gradient(90deg,rgb(233 237 243 / .94) 0%,rgb(233 237 243 / .8) 34%,rgb(233 237 243 / .48) 56%,rgb(233 237 243 / .08) 84%,transparent 100%),linear-gradient(180deg,rgb(233 237 243 / .04),transparent 48%,rgb(233 237 243 / .56))
}

:root[data-theme="light"] .page-intro-photo .breadcrumbs {
    color: #526175
}

:root[data-theme="light"] .page-intro-photo .breadcrumb-trail a, :root[data-theme="light"] .page-intro-photo .breadcrumb-back {
    color: #425066
}

:root[data-theme="light"] .page-intro-photo .breadcrumb-current {
    color: #172033
}

    :root[data-theme="light"] .page-intro-photo .breadcrumb-current::before {
        background: #6d28d9
    }

:root[data-theme="light"] .page-intro-photo .breadcrumb-back:hover, :root[data-theme="light"] .page-intro-photo .breadcrumb-trail a:hover {
    color: #172033
}

:root[data-theme="light"] .page-intro-copy > .eyebrow {
    color: #4d5b6f;
    text-shadow: none
}

:root[data-theme="light"] .page-intro-photo h1 {
    color: #172033;
    text-shadow: none
}

:root[data-theme="light"] .page-intro-photo .muted-heading {
    color: #5f6d82
}

:root[data-theme="light"] .page-intro-photo .blue-heading {
    color: #205fb5
}

:root[data-theme="light"] .page-intro-photo .intro-description {
    color: #334155;
    text-shadow: none
}

:root[data-theme="light"] .error-page-photo {
    color: #172033
}

    :root[data-theme="light"] .error-page-photo::before {
        background: linear-gradient(90deg,rgb(233 237 243 / .95) 0%,rgb(233 237 243 / .8) 44%,rgb(233 237 243 / .12) 100%),linear-gradient(180deg,rgb(233 237 243 / .06),rgb(233 237 243 / .52))
    }

    :root[data-theme="light"] .error-page-photo h1 {
        color: #172033;
        text-shadow: none
    }

    :root[data-theme="light"] .error-page-photo .muted-heading {
        color: #5f6d82
    }

    :root[data-theme="light"] .error-page-photo > p:not(.eyebrow) {
        color: #334155;
        text-shadow: none
    }

    :root[data-theme="light"] .error-page-photo a:not(.button) {
        color: #4d2196
    }

@media(min-width:701px) and (max-width:900px) {
    .next-steps {
        padding-top: 32px
    }
}

@media(max-width:800px) {
    .contact-page > .contact-form-panel {
        grid-row: auto
    }
}

@media(max-width:700px) {
    .page-intro-media img {
        object-position: 74% center;
        filter: saturate(.82) contrast(1.04) brightness(.69)
    }

    .page-intro-photo-kiosku .page-intro-media img {
        object-position: 70% center
    }

    .page-intro-shade {
        background: linear-gradient(90deg,rgb(5 7 10 / .94) 0%,rgb(5 7 10 / .76) 68%,rgb(5 7 10 / .42) 100%),linear-gradient(180deg,rgb(5 7 10 / .28),rgb(5 7 10 / .2) 48%,rgb(5 7 10 / .82) 100%)
    }

    .page-intro-inner {
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 44px
    }

    .page-intro-photo .breadcrumbs {
        margin-bottom: 0
    }

    .page-intro-copy {
        padding-block: 36px
    }

    .page-intro-photo h1 {
        font-size: clamp(40px,11.5vw,54px)
    }

    .page-intro-photo .intro-description {
        font-size: 15px;
        line-height: 1.65
    }

    .contact-page {
        padding-top: 56px
    }

    .error-page-photo {
        padding-top: calc(var(--header-height) + 48px);
        padding-bottom: 96px;
        background-position: 74% center
    }

    :root[data-theme="light"] .page-intro-media img {
        filter: saturate(.88) contrast(1.04) brightness(.98)
    }

    :root[data-theme="light"] .page-intro-shade {
        background: linear-gradient(90deg,rgb(233 237 243 / .9) 0%,rgb(233 237 243 / .7) 70%,rgb(233 237 243 / .28) 100%),linear-gradient(180deg,rgb(233 237 243 / .22),rgb(233 237 243 / .12) 48%,rgb(233 237 243 / .7) 100%)
    }
}

@media(min-height:700px) {
    .page-intro-inner {
        justify-content: center;
        padding-bottom: calc(var(--header-height) + 28px)
    }

    .page-intro-photo .breadcrumbs {
        position: absolute;
        inset-inline: 0;
        top: calc(var(--header-height) + 28px)
    }

    .page-intro-copy {
        margin-block: 0;
        padding-block: 0
    }
}

@media(max-width:700px) and (min-height:700px) {
    .page-intro-inner {
        padding-bottom: calc(var(--header-height) + 20px)
    }

    .page-intro-photo .breadcrumbs {
        top: calc(var(--header-height) + 20px)
    }
}

@media(max-height:699px) {
    .page-intro-copy {
        transform: translateY(-30px)
    }
}

/* Enhanced navigation stays subtle and never hides the page behind a loader. */
main {
    transition: opacity 120ms var(--ease)
}

html.is-navigating main {
    opacity: .72
}

html.page-entering main {
    animation: page-enter 300ms var(--ease)
}

/* Branded connection state replaces Blazor's generic white and blue dialog. */
.agon-reconnect {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    place-items: start center;
    padding: 20dvh var(--gutter) 32px;
    background: rgb(5 7 10 / .72)
}

    .agon-reconnect.components-reconnect-show, .agon-reconnect.components-reconnect-retrying, .agon-reconnect.components-reconnect-failed, .agon-reconnect.components-reconnect-rejected, .agon-reconnect.components-reconnect-paused, .agon-reconnect.components-reconnect-resume-failed {
        display: grid
    }

.agon-reconnect-panel {
    display: flex;
    width: min(420px,100%);
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    box-shadow: 0 24px 70px rgb(0 0 0 / .34);
    color: var(--text);
    text-align: center
}

    .agon-reconnect-panel .brand {
        font-size: 24px
    }

        .agon-reconnect-panel .brand svg {
            width: 30px;
            height: 30px
        }

.agon-reconnect-signal {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 18px
}

    .agon-reconnect-signal i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        animation: reconnect-signal 1.2s var(--ease) infinite
    }

        .agon-reconnect-signal i:nth-child(2) {
            animation-delay: 120ms
        }

        .agon-reconnect-signal i:nth-child(3) {
            animation-delay: 240ms
        }

.agon-reconnect-message {
    display: none;
    max-width: 310px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7
}

.components-reconnect-show .agon-reconnect-connecting {
    display: block
}

.components-reconnect-retrying .agon-reconnect-connecting {
    display: none
}

.components-reconnect-retrying .agon-reconnect-retrying, .components-reconnect-paused .agon-reconnect-paused, .components-reconnect-failed .agon-reconnect-failed, .components-reconnect-rejected .agon-reconnect-failed, .components-reconnect-resume-failed .agon-reconnect-failed {
    display: block
}

.agon-reconnect-action {
    display: none
}

.components-reconnect-paused .agon-reconnect-action, .components-reconnect-failed .agon-reconnect-action, .components-reconnect-rejected .agon-reconnect-action, .components-reconnect-resume-failed .agon-reconnect-action {
    display: inline-flex
}

.components-reconnect-failed .agon-reconnect-signal, .components-reconnect-rejected .agon-reconnect-signal, .components-reconnect-resume-failed .agon-reconnect-signal {
    display: none
}

@keyframes scroll-cue {
    0%,100% {
        transform: rotate(90deg) translateX(0)
    }

    50% {
        transform: rotate(90deg) translateX(4px)
    }
}

@keyframes page-enter {
    from {
        opacity: .72;
        transform: translateY(4px)
    }

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

@keyframes reconnect-signal {
    0%,100% {
        opacity: .35;
        transform: translateY(0)
    }

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

.contact-phones {
    display: grid;
    gap: 0
}

.contact-item, .contact-phone-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    color: var(--contact-foreground);
    font-size: 23px;
    line-height: 1.4;
    letter-spacing: -.02em
}

    .contact-item > .icon, .contact-phone-link > .icon {
        width: 24px;
        height: 24px;
        color: var(--contact-foreground);
        flex: 0 0 24px
    }





.contact-phone-link .icon, .footer-phone-link .icon {
    transform: scale(1.12)
}



    



    

.footer-phone-group {
    margin-top: 14px
}

.footer-phones {
    display: grid;
    gap: 0
}

.footer-phone-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--contact-foreground);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.02em
}

    .footer-phone-link > .icon {
        width: 20px;
        height: 20px;
        color: var(--contact-foreground);
        flex: 0 0 20px
    }

@media(max-width:700px) {
    .contact-item, .contact-phone-link {
        font-size: 21px
    }

    

    .contact-item > .icon, .contact-phone-link > .icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px
    }

    

    

    .footer-phones a {
        font-size: 15px
    }
}

@media(max-width:380px) {
    .contact-item, .contact-phone-link {
        font-size: 17px
    }

    
}