/* ================================================================
   AP NEURAL WEB — AUTOMATIZACIÓN E IA / FLOW ENGINE V1
================================================================ */

.page-service-automation {
    background: #08090B;
    overflow-x: clip;
}

.automation-main {
    position: relative;
    z-index: 2;
}


/* ================================================================
   BACKGROUND / AUTOMATION HUD V2
================================================================ */

.automation-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 47%,
            rgba(181,32,74,.105),
            transparent 24rem
        ),

        radial-gradient(
            circle at 50% 47%,
            rgba(151,154,162,.035),
            transparent 37rem
        ),

        #08090B;
}


/*
El dibujo se mantiene centrado.
No depende del tamaño exacto del viewport.
*/

.automation-field__svg {

    position: absolute;

    left: 50%;
    top: 49%;

    width:
        min(96vw,86rem);

    max-width: none;

    height: auto;

    transform:
        translate(-50%,-50%);

    overflow: visible;

    opacity: .53;
}

.automation-field__brandmark {

    position: absolute;

    left: 50%;
    top: 49%;

    z-index: 3;

    width: clamp(7rem, 11vw, 10.5rem);

    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.automation-field__brandmark::before {

    content: "";

    position: absolute;

    inset: 12%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(181,32,74,.10) 0%,
            rgba(181,32,74,.04) 45%,
            transparent 72%
        );

    filter: blur(10px);
}

.automation-field__brandmark img {

    position: relative;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: .48;

    filter:
        drop-shadow(0 0 16px rgba(181,32,74,.18))
        drop-shadow(0 0 6px rgba(255,255,255,.05));

    animation:
        automationBrandFloat 7s ease-in-out infinite,
        automationBrandGlow 4.5s ease-in-out infinite;
}

/* Bajamos un poco el peso visual del núcleo geométrico para que el logo se lea mejor */
.automation-hud__core rect:first-child {
    opacity: .72;
}

.automation-hud__core rect:nth-child(2) {
    opacity: .52;
}

@keyframes automationBrandFloat {

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

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

@keyframes automationBrandGlow {

    0%, 100% {
        opacity: .42;
    }

    50% {
        opacity: .62;
    }
}

@media (max-width:1000px) {

    .automation-field__brandmark {
        top: 47%;
        width: clamp(6.6rem, 15vw, 9rem);
    }
}

@media (max-width:767px) {

    .automation-field__brandmark {
        top: 39%;
        width: clamp(5.8rem, 24vw, 7.8rem);
    }

    .automation-field__brandmark img {
        opacity: .40;
    }
}

@media (max-width:479px) {

    .automation-field__brandmark {
        top: 36%;
        width: clamp(5rem, 28vw, 6.8rem);
    }
}

@media (prefers-reduced-motion:reduce) {

    .automation-field__brandmark img {
        animation: none !important;
    }
}




/* ================================================================
   COMMON SVG
================================================================ */

.automation-field__svg
circle,

.automation-field__svg
path,

.automation-field__svg
line,

.automation-field__svg
rect {

    vector-effect:
        non-scaling-stroke;
}


.automation-field__svg text {

    font-family:
        var(--font-mono);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .08em;

    fill:
        rgba(151,154,162,.72);

    text-transform: uppercase;

    user-select: none;
}



/* ================================================================
   RINGS
================================================================ */

.automation-hud__ring {

    fill: none;

    transform-box:
        view-box;

    transform-origin:
        600px 430px;
}


.automation-hud__ring--outer {

    stroke:
        rgba(181,32,74,.92);

    stroke-width: 4;

    filter:
        drop-shadow(
            0 0 5px
            rgba(181,32,74,.20)
        );
}


.automation-hud__ring--segments-a {

    stroke:
        rgba(203,185,180,.72);

    stroke-width: 7;

    stroke-dasharray:
        8 7 16 5 5 7 13 9 6 24;

    animation:
        automationHudRingA
        22s
        linear
        infinite;
}


.automation-hud__ring--middle {

    stroke:
        rgba(151,154,162,.45);

    stroke-width: 3;
}


.automation-hud__ring--segments-b {

    stroke:
        rgba(184,163,158,.70);

    stroke-width: 11;

    stroke-dasharray:
        14 15 7 11 19 18 8 8;

    animation:
        automationHudRingB
        16s
        linear
        infinite;
}


.automation-hud__ring--inner {

    stroke:
        rgba(151,154,162,.50);

    stroke-width: 3;
}


.automation-hud__ring--core-ring {

    stroke:
        rgba(181,32,74,.28);

    stroke-width: 1;

    stroke-dasharray:
        3 9;

    animation:
        automationHudCoreRing
        10s
        linear
        infinite;
}



/* ================================================================
   CORE
================================================================ */

.automation-hud__core rect:first-child {

    fill:
        rgba(139,21,56,.13);

    stroke:
        rgba(181,32,74,.62);

    stroke-width: 1;

    animation:
        automationHudCorePulse
        3.4s
        ease-in-out
        infinite;
}


.automation-hud__core rect:nth-child(2) {

    fill:
        rgba(181,32,74,.30);

    stroke:
        rgba(243,243,241,.28);

    stroke-width: 1;
}


.automation-hud__core text {

    fill:
        rgba(243,243,241,.55);

    font-size: 10px;
}



/* ================================================================
   SCANNER
================================================================ */

.automation-hud__scanner {

    transform-box:
        view-box;

    transform-origin:
        600px 430px;

    animation:
        automationHudScanner
        15s
        linear
        infinite;
}


.automation-hud__scanner line {

    stroke:
        rgba(181,32,74,.18);

    stroke-width: 1;
}


.automation-hud__scanner circle {

    fill:
        #B5204A;

    filter:
        drop-shadow(
            0 0 7px
            rgba(181,32,74,.62)
        );
}



/* ================================================================
   ORBIT SIGNAL
================================================================ */

.automation-hud__orbit circle {

    fill:
        #B5204A;

    stroke:
        rgba(243,243,241,.60);

    stroke-width: 1;

    filter:

        drop-shadow(
            0 0 4px
            rgba(181,32,74,.90)
        )

        drop-shadow(
            0 0 10px
            rgba(181,32,74,.32)
        );

    animation:
        automationHudOrbitPulse
        1.7s
        ease-in-out
        infinite;
}



/* ================================================================
   SIDE BRANCHES
================================================================ */

.automation-hud__branch path {

    fill: none;

    stroke:
        rgba(181,32,74,.58);

    stroke-width: 1.3;

    stroke-dasharray:
        5 8;

    animation:
        automationHudBranchFlow
        6s
        linear
        infinite;
}


.automation-hud__branch circle {

    fill:
        #B5204A;

    stroke:
        rgba(243,243,241,.16);

    stroke-width: 1;

    filter:
        drop-shadow(
            0 0 5px
            rgba(181,32,74,.40)
        );

    animation:
        automationHudNodePulse
        4.2s
        ease-in-out
        infinite;
}


.automation-hud__branch:nth-child(3n)
circle {

    animation-delay:
        -1.4s;
}


.automation-hud__branch:nth-child(3n + 1)
circle {

    animation-delay:
        -2.8s;
}


.automation-hud__branch text {

    fill:
        rgba(190,192,198,.73);

    font-size: 11px;
}


.automation-hud__section-label {

    fill:
        rgba(181,32,74,.88)
        !important;

    font-size: 10px
        !important;

    letter-spacing:
        .14em
        !important;
}



/* ================================================================
   AI LOWER BRANCH
================================================================ */

.automation-hud__ai-main {

    fill: none;

    stroke:
        rgba(181,32,74,.48);

    stroke-width: 1.2;
}


.automation-hud__ai-item line {

    stroke:
        rgba(181,32,74,.30);

    stroke-width: 1;
}


.automation-hud__ai-item circle {

    fill:
        #B5204A;

    animation:
        automationHudAiPulse
        4.8s
        ease-in-out
        infinite;
}


.automation-hud__ai-item:nth-child(4)
circle {

    animation-delay:
        -1.2s;
}


.automation-hud__ai-item:nth-child(5)
circle {

    animation-delay:
        -2.4s;
}


.automation-hud__ai-item:nth-child(6)
circle {

    animation-delay:
        -3.6s;
}



/* ================================================================
   HUMAN CONTROL
================================================================ */

.automation-hud__human path {

    fill: none;

    stroke:
        rgba(181,32,74,.48);

    stroke-width: 1.2;
}


.automation-hud__human rect {

    fill:
        rgba(10,11,14,.48);

    stroke:
        rgba(181,32,74,.32);

    stroke-width: 1;

    animation:
        automationHudHuman
        5.5s
        ease-in-out
        infinite;
}


.automation-hud__human text {

    fill:
        rgba(197,199,204,.72);

    font-size: 9px;
}



/* ================================================================
   TECHNICAL TICKS
================================================================ */

.automation-hud__ticks line {

    stroke:
        rgba(181,32,74,.42);

    stroke-width: 1.5;
}



/* ================================================================
   BACKGROUND VIGNETTE

   Protege legibilidad del contenido.
================================================================ */

.automation-field::before {

    content: "";

    position: absolute;

    z-index: 4;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(8,9,11,.52) 0%,
            rgba(8,9,11,.11) 32%,
            rgba(8,9,11,.08) 68%,
            rgba(8,9,11,.48) 100%
        ),

        linear-gradient(
            180deg,
            rgba(8,9,11,.16),
            rgba(8,9,11,.02) 42%,
            rgba(8,9,11,.27)
        );

    pointer-events: none;
}



/* ================================================================
   ANIMATIONS
================================================================ */

@keyframes automationHudRingA {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }

}


@keyframes automationHudRingB {

    from {

        transform:
            rotate(360deg);
    }

    to {

        transform:
            rotate(0deg);
    }

}


@keyframes automationHudCoreRing {

    from {

        stroke-dashoffset: 0;
    }

    to {

        stroke-dashoffset: -80;
    }

}


@keyframes automationHudCorePulse {

    0%,
    100% {

        fill:
            rgba(139,21,56,.08);

        stroke:
            rgba(181,32,74,.38);
    }

    50% {

        fill:
            rgba(139,21,56,.23);

        stroke:
            rgba(181,32,74,.82);
    }

}


@keyframes automationHudScanner {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }

}


@keyframes automationHudOrbitPulse {

    0%,
    100% {

        opacity: .48;
    }

    50% {

        opacity: 1;
    }

}


@keyframes automationHudBranchFlow {

    from {

        stroke-dashoffset: 0;
    }

    to {

        stroke-dashoffset: -65;
    }

}


@keyframes automationHudNodePulse {

    0%,
    100% {

        opacity: .34;
    }

    50% {

        opacity: 1;
    }

}


@keyframes automationHudAiPulse {

    0%,
    100% {

        opacity: .28;
    }

    50% {

        opacity: .92;
    }

}


@keyframes automationHudHuman {

    0%,
    100% {

        stroke:
            rgba(181,32,74,.22);
    }

    50% {

        stroke:
            rgba(181,32,74,.58);
    }

}



/* ================================================================
   TABLET
================================================================ */

@media (max-width:1000px) {

    .automation-field__svg {

        width:
            max(118vw,60rem);

        top: 47%;

        opacity: .43;
    }

}



/* ================================================================
   MOBILE

   El centro permanece visible.
   Las etiquetas laterales pierden fuerza para no invadir contenido.
================================================================ */

@media (max-width:767px) {

    .automation-field {

        background:

            radial-gradient(
                circle at 50% 34%,
                rgba(181,32,74,.11),
                transparent 18rem
            ),

            #08090B;
    }


    .automation-field__svg {

        top: 39%;

        width:
            max(185vw,48rem);

        opacity: .34;
    }


    .automation-hud__input text,
    .automation-hud__output text,
    .automation-hud__ai text,
    .automation-hud__human text {

        opacity: .58;
    }


    .automation-hud__section-label {

        opacity: .72
            !important;
    }


    .automation-field::before {

        background:

            linear-gradient(
                180deg,
                rgba(8,9,11,.22),
                rgba(8,9,11,.04) 35%,
                rgba(8,9,11,.40)
            );
    }

}



/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width:479px) {

    .automation-field__svg {

        width: 54rem;

        top: 36%;

        opacity: .30;
    }


    /*
    En pantallas muy pequeñas el concepto se conserva,
    pero quitamos texto periférico para evitar ruido.
    */

    .automation-hud__input text:not(.automation-hud__section-label),
    .automation-hud__output text:not(.automation-hud__section-label),
    .automation-hud__ai-item text {

        opacity: .25;
    }

}



/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion:reduce) {

    .automation-hud__ring,
    .automation-hud__scanner,
    .automation-hud__orbit circle,
    .automation-hud__branch path,
    .automation-hud__branch circle,
    .automation-hud__ai-item circle,
    .automation-hud__human rect,
    .automation-hud__core rect {

        animation:
            none !important;
    }


    .automation-hud__orbit {

        display: none;
    }

}




/* ================================================================
   HERO
================================================================ */

.automation-hero {
    min-height: min(100svh,62rem);

    display: flex;
    align-items: center;

    padding-top:
        clamp(8rem,13vw,11rem);
}

.automation-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(20rem,.58fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: end;
}

.automation-hero h1 {
    max-width: 10.5ch;

    margin-bottom: 2rem;

    font-size:
        clamp(3.7rem,7.3vw,7.8rem);

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;
    text-wrap: balance;
}

.automation-hero h1 span {
    display: block;

    color: #B5204A;
}

.automation-hero__lead {
    max-width: 43rem;

    margin-bottom: 2rem;

    color: var(--color-text-soft);

    font-size:
        clamp(1.05rem,1.3vw,1.3rem);

    line-height: 1.75;
}

.automation-hero__actions,
.automation-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}


/* ================================================================
   BUTTONS — SEGMENT SIGNAL

   Distinto de Sistemas:
   una señal compuesta por segmentos pasa detrás del texto.
================================================================ */

.automation-main
.automation-button {
    position: relative;

    isolation: isolate;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    text-align: center;
}

.automation-main
.automation-button > span {
    position: relative;
    z-index: 5;

    width: 100%;
    text-align: center;
}

.automation-button--signal > i {
    position: absolute;
    z-index: 2;

    left: -42%;
    top: 50%;

    width: 34%;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        repeating-linear-gradient(
            90deg,
            #B5204A 0 18px,
            transparent 18px 27px
        );

    opacity: 0;

    transition:
        left 620ms cubic-bezier(.22,1,.36,1),
        opacity 180ms ease;
}

.automation-button--segments > i {
    position: absolute;
    z-index: 2;

    left: .7rem;
    right: .7rem;
    bottom: .5rem;

    height: 2px;

    background:
        repeating-linear-gradient(
            90deg,
            #B5204A 0 12px,
            transparent 12px 20px
        );

    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform
        480ms
        cubic-bezier(.22,1,.36,1);
}

@media (hover:hover) and (pointer:fine) {

    .automation-button--signal:hover > i {
        left: 108%;
        opacity: .82;
    }

    .automation-button--segments:hover > i {
        transform: scaleX(1);
    }
}


/* ================================================================
   HERO FLOW CARD
================================================================ */

.automation-live {
    position: relative;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.14);

    background:
        rgba(10,11,14,.80);

    backdrop-filter:
        blur(10px);

    overflow: hidden;

    transition:
        transform 340ms cubic-bezier(.22,1,.36,1),
        border-color 280ms ease;
}

.automation-live::before,
.automation-live::after {
    content: "";

    position: absolute;

    width: 2.7rem;
    height: 2.7rem;
}

.automation-live::before {
    left: -1px;
    top: -1px;

    border-left: 1px solid #B5204A;
    border-top: 1px solid #B5204A;
}

.automation-live::after {
    right: -1px;
    bottom: -1px;

    border-right:
        1px solid
        rgba(181,32,74,.34);

    border-bottom:
        1px solid
        rgba(181,32,74,.34);
}

.automation-live__head {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    padding-bottom: .9rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .10em;
}

.automation-live__head strong {
    color: #B5204A;
}

.automation-live__pipeline {
    display: grid;

    grid-template-columns: 1fr;

    gap: .45rem;

    padding: 1.6rem 0;
}

.automation-live__pipeline > div {
    display: grid;

    grid-template-columns:
        2rem minmax(0,1fr) auto;

    gap: .7rem;

    align-items: center;

    min-width: 0;

    padding: .75rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.58);

    transition:
        transform 280ms cubic-bezier(.22,1,.36,1),
        border-color 240ms ease,
        background 240ms ease;
}

.automation-live__pipeline > div span {
    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .57rem;
}

.automation-live__pipeline > div small {
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .53rem;
}

.automation-live__pipeline > div strong {
    text-transform: uppercase;

    font-size: .78rem;
}

.automation-live__pipeline > i {
    width: 1px;
    height: .7rem;

    justify-self: center;

    background:
        rgba(181,32,74,.36);
}

.automation-live__status {
    display: grid;
    gap: .75rem;

    padding-top: .9rem;

    border-top:
        1px solid
        rgba(151,154,162,.10);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .57rem;
}

.automation-live__bar {
    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(151,154,162,.09);
}

.automation-live__bar i {
    position: absolute;

    left: -25%;

    width: 24%;
    height: 100%;

    background: #B5204A;

    animation:
        automationLiveBar
        3.3s linear infinite;
}

@media (hover:hover) and (pointer:fine) {

    .automation-live:hover {
        transform: translateY(-4px);

        border-color:
            rgba(181,32,74,.28);
    }

    .automation-live__pipeline > div:hover {
        transform: translateX(.3rem);

        border-color:
            rgba(181,32,74,.27);

        background:
            rgba(139,21,56,.055);
    }
}


/* ================================================================
   SERVICE NAV
================================================================ */

.automation-service-nav {
    position: relative;
    z-index: 3;

    border-top:
        1px solid
        rgba(151,154,162,.08);

    border-bottom:
        1px solid
        rgba(151,154,162,.08);

    background:
        rgba(8,9,11,.84);

    backdrop-filter:
        blur(12px);
}

.automation-service-nav__inner {
    display: grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));
}

.automation-service-nav a {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: .35rem;

    min-width: 0;

    padding: 1rem .8rem;

    color: var(--color-text-muted);

    border-right:
        1px solid
        rgba(151,154,162,.08);

    font-size: .76rem;

    transition:
        color 220ms ease,
        background 220ms ease;
}

.automation-service-nav a:last-child {
    border-right: 0;
}

.automation-service-nav a span {
    color:
        rgba(181,32,74,.70);

    font-family: var(--font-mono);
    font-size: .55rem;
}

.automation-service-nav
a[aria-current="page"] {
    color: #F3F3F1;

    background:
        rgba(139,21,56,.075);
}

.automation-service-nav
a[aria-current="page"]::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: #B5204A;
}

@media (hover:hover) and (pointer:fine) {

    .automation-service-nav a:hover {
        color: #F3F3F1;

        background:
            rgba(139,21,56,.045);
    }
}


/* ================================================================
   COMMON HEADINGS
================================================================ */

.automation-principle h2,
.automation-engine h2,
.automation-cases h2,
.automation-ai h2,
.automation-cta h2 {
    font-size:
        clamp(2.7rem,5vw,5.4rem);

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;
    text-wrap: balance;
}

.automation-principle h2 span,
.automation-engine h2 span,
.automation-cases h2 span,
.automation-ai h2 span,
.automation-cta h2 span {
    color: #B5204A;
}


/* ================================================================
   PRINCIPLE
================================================================ */

.automation-principle__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,.72fr);

    gap:
        clamp(3rem,8vw,8rem);
}

.automation-principle__copy {
    padding-left:
        clamp(1.3rem,3vw,2.8rem);

    border-left:
        1px solid
        rgba(181,32,74,.30);
}

.automation-principle__copy p {
    color: var(--color-text-soft);

    line-height: 1.8;
}

.automation-principle__copy strong {
    display: block;

    margin-top: 2rem;

    color: #F3F3F1;

    line-height: 1.65;
}


/* ================================================================
   ENGINE HEADER
================================================================ */

.automation-engine {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.automation-engine__head {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(18rem,.48fr);

    gap:
        clamp(2rem,7vw,7rem);

    align-items: end;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}

.automation-engine__head > p {
    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.75;
}


/* ================================================================
   TABS
================================================================ */

.automation-console__tabs {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    border:
        1px solid
        rgba(151,154,162,.11);

    border-bottom: 0;
}

.automation-tab {
    position: relative;

    display: grid;

    grid-template-columns:
        2rem minmax(0,1fr);

    gap: .7rem;

    min-width: 0;
    min-height: 7rem;

    padding: 1rem;

    color: inherit;

    text-align: left;

    background:
        rgba(11,12,15,.72);

    border: 0;

    border-right:
        1px solid
        rgba(151,154,162,.10);

    cursor: pointer;

    overflow: hidden;

    transition:
        background 260ms ease,
        transform 280ms cubic-bezier(.22,1,.36,1);
}

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

.automation-tab::after {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 0;

    height: 2px;

    background:
        repeating-linear-gradient(
            90deg,
            #B5204A 0 12px,
            transparent 12px 20px
        );

    transform: scaleX(0);

    transition:
        transform
        420ms
        cubic-bezier(.22,1,.36,1);
}

.automation-tab.is-active::after {
    transform: scaleX(1);
}

.automation-tab > span {
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .61rem;
}

.automation-tab small {
    display: block;

    margin-bottom: .4rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .10em;
}

.automation-tab strong {
    text-transform: uppercase;
}

.automation-tab.is-active {
    background:
        rgba(139,21,56,.075);
}

.automation-tab.is-active > span {
    color: #B5204A;
}

@media (hover:hover) and (pointer:fine) {

    .automation-tab:hover {
        transform: translateY(-3px);

        background:
            rgba(139,21,56,.045);
    }
}


/* ================================================================
   VIEW
================================================================ */

.automation-view {
    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(9,10,13,.84);
}

.automation-view__top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    padding: .9rem 1.1rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .11em;
}

.automation-view__top > div {
    display: flex;
    gap: 1rem;
}

.automation-view__top span {
    color: var(--color-text-muted);
}

.automation-view__top strong {
    color: #B5204A;
}

.automation-view__body {
    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(25rem,1fr);
}

.automation-view__copy {
    padding:
        clamp(2rem,4vw,4rem);

    border-right:
        1px solid
        rgba(151,154,162,.10);
}

.automation-view__copy h3 {
    max-width: 10ch;

    margin-bottom: 1.4rem;

    font-size:
        clamp(2.4rem,4.7vw,4.7rem);

    line-height: .96;

    letter-spacing: -.045em;

    text-transform: uppercase;
}

.automation-view__copy > p {
    color: var(--color-text-soft);

    line-height: 1.75;
}

.automation-view__responsibility {
    margin-top: 2rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.48);
}

.automation-view__responsibility span {
    display: block;

    margin-bottom: .6rem;

    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .11em;
}


/* ================================================================
   PIPELINE
================================================================ */

.automation-pipeline {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: .55rem;

    align-items: center;

    min-height: 32rem;

    padding:
        clamp(1.4rem,3vw,2.3rem);

    overflow: hidden;

    background:
        linear-gradient(
            rgba(151,154,162,.027) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(151,154,162,.027) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;
}

.automation-pipeline__node {
    position: relative;
    z-index: 2;

    display: grid;
    align-content: center;

    min-width: 0;
    min-height: 8rem;

    padding: .7rem;

    text-align: center;

    border:
        1px solid
        rgba(151,154,162,.13);

    background:
        rgba(10,11,14,.94);

    transition:
        transform 330ms cubic-bezier(.22,1,.36,1),
        border-color 260ms ease,
        background 260ms ease;
}

.automation-pipeline__node span {
    margin-bottom: .7rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .55rem;
}

.automation-pipeline__node strong {
    font-size: .73rem;

    text-transform: uppercase;
}

.automation-pipeline__node.is-active {
    border-color:
        rgba(181,32,74,.50);

    background:
        rgba(139,21,56,.10);
}

.automation-pipeline__node.is-active span {
    color: #B5204A;
}

.automation-pipeline__rail {
    position: relative;

    width: 1.3rem;
    height: 2px;

    overflow: hidden;

    background:
        rgba(151,154,162,.14);
}

.automation-pipeline__rail i {
    position: absolute;

    left: -100%;

    width: 100%;
    height: 100%;

    background: #B5204A;

    animation:
        automationPipelineRail
        2.8s linear infinite;
}

.automation-pipeline__rail:nth-of-type(4) i {
    animation-delay: -.9s;
}

.automation-pipeline__rail:nth-of-type(6) i {
    animation-delay: -1.8s;
}

.automation-pipeline__lower {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 2rem;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 1rem;

    align-items: center;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .55rem;
}

.automation-pipeline__lower > i {
    position: relative;

    height: 1px;

    overflow: hidden;

    background:
        rgba(151,154,162,.10);
}

.automation-pipeline__lower > i::after {
    content: "";

    position: absolute;

    left: -20%;

    width: 20%;
    height: 100%;

    background: #B5204A;

    animation:
        automationLowerSignal
        3.8s linear infinite;
}

.automation-pipeline__lower strong {
    color: #B5204A;
}

.automation-view.is-changing
.automation-view__copy {
    animation:
        automationCopyChange
        470ms cubic-bezier(.22,1,.36,1);
}

.automation-view.is-changing
.automation-pipeline__node {
    animation:
        automationNodeChange
        520ms cubic-bezier(.22,1,.36,1);
}


/* ================================================================
   CASES
================================================================ */

.automation-cases {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.automation-cases__head {
    max-width: 72rem;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}

.automation-cases__grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: .7rem;
}

.automation-case {
    position: relative;

    min-height: 22rem;

    padding: 1.35rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(12,13,16,.68);

    overflow: hidden;

    transition:
        transform 330ms cubic-bezier(.22,1,.36,1),
        border-color 260ms ease,
        background 260ms ease;
}

.automation-case > span {
    display: block;

    margin-bottom:
        clamp(3.5rem,6vw,5.5rem);

    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .62rem;
}

.automation-case > small {
    display: block;

    margin-bottom: .65rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .55rem;
    letter-spacing: .10em;
}

.automation-case h3 {
    margin-bottom: .8rem;

    font-size:
        clamp(1.3rem,2vw,1.8rem);

    line-height: 1.05;

    text-transform: uppercase;
}

.automation-case p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .84rem;

    line-height: 1.7;
}


/*
Ruta interna que se enciende.
*/

.automation-case__route {
    position: absolute;

    left: 1rem;
    right: 1rem;
    bottom: 1rem;

    height: 1px;

    overflow: hidden;

    background:
        rgba(151,154,162,.08);
}

.automation-case__route i {
    position: absolute;

    left: -35%;

    width: 32%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #B5204A
        );

    opacity: 0;

    transition:
        left 600ms cubic-bezier(.22,1,.36,1),
        opacity 180ms ease;
}

@media (hover:hover) and (pointer:fine) {

    .automation-case:hover {
        transform: translateY(-5px);

        border-color:
            rgba(181,32,74,.25);

        background:
            rgba(139,21,56,.045);
    }

    .automation-case:hover
    .automation-case__route i {
        left: 103%;

        opacity: 1;
    }
}


/* ================================================================
   AI SECTION
================================================================ */

.automation-ai {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.automation-ai__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(22rem,.75fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: center;
}

.automation-ai__copy p {
    max-width: 44rem;

    color: var(--color-text-soft);

    line-height: 1.8;
}

.automation-ai__guard {
    position: relative;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.13);

    background:
        rgba(10,11,14,.76);

    overflow: hidden;
}

.automation-ai__guard::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width: 32%;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #B5204A,
            transparent
        );
}

.automation-ai__guard-top {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    padding-bottom: .85rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    font-family: var(--font-mono);
    font-size: .57rem;
    letter-spacing: .09em;

    color: var(--color-text-muted);
}

.automation-ai__guard-top strong {
    color: #B5204A;
}

.automation-ai__steps {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: .4rem;

    align-items: center;

    padding: 2rem 0;
}

.automation-ai__steps > div {
    display: grid;
    gap: .4rem;

    min-width: 0;

    padding: .7rem .45rem;

    text-align: center;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.58);
}

.automation-ai__steps > div span {
    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .55rem;
}

.automation-ai__steps > div strong {
    font-size: .7rem;

    text-transform: uppercase;
}

.automation-ai__steps > div small {
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .49rem;
}

.automation-ai__steps > i {
    width: .8rem;
    height: 1px;

    background:
        rgba(181,32,74,.35);
}

.automation-ai__rule {
    padding-top: .9rem;

    border-top:
        1px solid
        rgba(151,154,162,.10);
}

.automation-ai__rule span {
    display: block;

    margin-bottom: .55rem;

    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .10em;
}


/* ================================================================
   EXAMPLE FLOW
================================================================ */

.automation-example {
    border-top:
        1px solid
        rgba(151,154,162,.08);

    border-bottom:
        1px solid
        rgba(151,154,162,.08);
}

.automation-example__track {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: .7rem;

    align-items: center;

    margin-top:
        clamp(2.5rem,5vw,4rem);
}

.automation-example__track article {
    display: grid;
    gap: .4rem;

    min-width: 0;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(11,12,15,.62);
}

.automation-example__track article span {
    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .57rem;
}

.automation-example__track article small {
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: .51rem;
}

.automation-example__track article strong {
    text-transform: uppercase;

    font-size: .82rem;
}

.automation-example__track > i {
    width: 1.7rem;
    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            #B5204A 0 5px,
            transparent 5px 9px
        );
}


/* ================================================================
   CTA
================================================================ */

.automation-cta__inner {
    display: grid;

    grid-template-columns:
        minmax(12rem,.33fr)
        minmax(0,1fr);

    gap:
        clamp(3rem,7vw,7rem);

    align-items: center;
}

.automation-cta__flow {
    display: grid;

    gap: .55rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(10,11,14,.68);
}

.automation-cta__flow span {
    display: grid;

    place-items: center;

    min-height: 3.8rem;

    color: var(--color-text-muted);

    border:
        1px solid
        rgba(151,154,162,.09);

    font-family: var(--font-mono);
    font-size: .57rem;
}

.automation-cta__flow span:nth-of-type(3) {
    color: #B5204A;

    border-color:
        rgba(181,32,74,.26);
}

.automation-cta__flow i {
    width: 1px;
    height: .8rem;

    justify-self: center;

    background:
        rgba(181,32,74,.35);
}

.automation-cta__copy p {
    max-width: 45rem;

    margin:
        1.5rem 0 2rem;

    color: var(--color-text-muted);

    line-height: 1.75;
}


/* ================================================================
   FOOTER
================================================================ */

.automation-footer {
    position: relative;
    z-index: 3;

    padding:
        clamp(3.5rem,6vw,5.5rem)
        0
        1.5rem;

    background: #08090B;

    border-top:
        1px solid
        rgba(52,54,61,.55);
}

.automation-footer::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width:
        min(8rem,28vw);

    height: 1px;

    transform:
        translateX(-50%);

    background: #B5204A;
}

.automation-footer
.site-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: start;
}

.automation-footer
.site-footer__brand {
    display: flex;

    align-items: flex-start;

    gap: 1rem;
}

.automation-footer
.site-footer__brand > div {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.automation-footer
.site-footer__brand strong {
    font-family: var(--font-display);

    text-transform: uppercase;
}

.automation-footer
.site-footer__brand > div span {
    color: var(--color-text-muted);

    font-size: .82rem;
}

.automation-footer
.site-footer__nav {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 2rem;
}

.automation-footer
.site-footer__nav > div {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}

.automation-footer
.site-footer__nav strong {
    margin-bottom: .25rem;

    color: #B5204A;

    font-family: var(--font-mono);
    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.automation-footer
.site-footer__nav a {
    position: relative;

    width: fit-content;
    max-width: 100%;

    color: var(--color-text-muted);

    font-size: .87rem;
}

/* sin ::after local */

.automation-footer
.site-footer__bottom {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-top: 4rem;

    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(52,54,61,.48);

    color:
        rgba(151,154,162,.58);

    font-family: var(--font-mono);
    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ================================================================
   TABLET
================================================================ */

@media (max-width:1050px) {

    .automation-cases__grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .automation-view__body {
        grid-template-columns: 1fr;
    }

    .automation-view__copy {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.10);
    }

    .automation-pipeline {
        min-height: 25rem;
    }
}


/* ================================================================
   <= 900
================================================================ */

@media (max-width:900px) {

    .automation-hero__grid,
    .automation-principle__grid,
    .automation-engine__head,
    .automation-ai__grid,
    .automation-cta__inner,
    .automation-footer
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .automation-live {
        max-width: 40rem;
    }

    .automation-service-nav__inner {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .automation-service-nav a {
        border-bottom:
            1px solid
            rgba(151,154,162,.08);
    }

    .automation-console__tabs {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .automation-tab:nth-child(2) {
        border-right: 0;
    }

    .automation-example__track {
        grid-template-columns: 1fr;
    }

    .automation-example__track > i {
        width: 1px;
        height: 1rem;

        justify-self: center;
    }
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width:767px) {

    .automation-field__svg {
        width:
            max(190vw,59rem);

        opacity: .28;
    }

    .automation-field::after {
        opacity: .17;
    }

    .automation-hero {
        min-height: 0;

        padding-top: 8rem;
    }

    .automation-hero h1 {
        max-width: 10ch;

        font-size:
            clamp(3rem,15vw,5.2rem);
    }

    .automation-hero__actions,
    .automation-cta__actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .automation-hero__actions .ap-button,
    .automation-cta__actions .ap-button {
        width: 100%;
        min-width: 0;

        justify-content: center;
    }

    .automation-main
    .automation-button > span {
        white-space: normal;

        text-wrap: balance;
    }

    .automation-service-nav__inner {
        grid-template-columns: 1fr;
    }

    .automation-service-nav a {
        border-right: 0;
    }

    .automation-principle__copy {
        padding-left: 1rem;
    }

    .automation-console__tabs {
        grid-template-columns: 1fr;
    }

    .automation-tab {
        min-height: 5.7rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.10);
    }

    .automation-tab:last-child {
        border-bottom: 0;
    }

    .automation-view__top {
        align-items: flex-start;
    }

    .automation-view__top > div {
        flex-direction: column;
        gap: .2rem;
    }

    .automation-view__copy {
        padding:
            1.5rem 1rem;
    }

    .automation-pipeline {
        grid-template-columns: 1fr;

        min-height: 0;

        padding:
            1rem 1rem 4rem;
    }

    .automation-pipeline__rail {
        width: 2px;
        height: 1rem;

        justify-self: center;
    }

    .automation-pipeline__rail i {
        left: 0;
        top: -100%;

        width: 100%;
        height: 100%;

        animation:
            automationPipelineRailMobile
            2.8s linear infinite;
    }

    .automation-pipeline__node {
        min-height: 6rem;
    }

    .automation-pipeline__lower {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .automation-cases__grid {
        grid-template-columns: 1fr;
    }

    .automation-case {
        min-height: 17rem;
    }

    .automation-ai__steps {
        grid-template-columns: 1fr;
    }

    .automation-ai__steps > i {
        width: 1px;
        height: .8rem;

        justify-self: center;
    }

    .automation-footer
    .site-footer__nav {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            2rem 1.4rem;
    }

    .automation-footer
    .site-footer__bottom {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }
}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width:479px) {

    .automation-footer
    .site-footer__nav {
        grid-template-columns: 1fr;
    }

    .automation-pipeline__lower {
        grid-template-columns:
            auto minmax(2rem,1fr);

        gap: .5rem;
    }

    .automation-pipeline__lower strong {
        grid-column: 1 / -1;
    }
}


/* ================================================================
   KEYFRAMES
================================================================ */

@keyframes automationRailFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -120;
    }
}

@keyframes automationSignalFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -110;
    }
}

@keyframes automationGatePulse {

    0%,
    100% {
        stroke: rgba(181,32,74,.08);
        opacity: .42;
    }

    50% {
        stroke: rgba(181,32,74,.28);
        opacity: .9;
    }
}

@keyframes automationCoreMiddle {

    0%,
    100% {
        stroke: rgba(181,32,74,.18);
    }

    50% {
        stroke: rgba(181,32,74,.45);
    }
}

@keyframes automationCoreInner {

    0%,
    100% {
        fill: rgba(139,21,56,.06);
    }

    50% {
        fill: rgba(139,21,56,.17);
    }
}

@keyframes automationFieldScan {

    0%,
    100% {
        top: 18%;
        opacity: 0;
    }

    12% {
        opacity: .28;
    }

    50% {
        top: 82%;
        opacity: .42;
    }

    88% {
        opacity: .28;
    }
}

@keyframes automationLiveBar {

    from {
        left: -25%;
    }

    to {
        left: 102%;
    }
}

@keyframes automationPipelineRail {

    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}

@keyframes automationPipelineRailMobile {

    from {
        top: -100%;
    }

    to {
        top: 100%;
    }
}

@keyframes automationLowerSignal {

    from {
        left: -20%;
    }

    to {
        left: 102%;
    }
}

@keyframes automationCopyChange {

    from {
        opacity: .2;

        transform:
            translateY(.55rem);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes automationNodeChange {

    0% {
        opacity: .25;

        transform:
            scale(.96);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion:reduce) {

    .automation-field__rails path,
    .automation-field__gates rect,
    .automation-field__core rect,
    .automation-field__signal,
    .automation-field::after,
    .automation-live__bar i,
    .automation-pipeline__rail i,
    .automation-pipeline__lower > i::after {
        animation: none !important;
    }

    .automation-field__traveler {
        display: none;
    }

    .automation-view.is-changing
    .automation-view__copy,

    .automation-view.is-changing
    .automation-pipeline__node {
        animation: none !important;
    }

    .automation-live,
    .automation-tab,
    .automation-case {
        transition: none !important;
    }
}


/* ================================================================
   BRANDMARK NEON OVERRIDE V3
   - elimina el cuadrito central
   - deja el logo limpio
   - añade neón cambiante
================================================================ */

.automation-hud__core rect {
    display: none !important;
}

.automation-field__brandmark {
    position: absolute;
    left: 50%;
    top: 49%;
    z-index: 3;
    width: clamp(7rem, 11vw, 10.5rem);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    isolation: isolate;
}

.automation-field__brandmark::before,
.automation-field__brandmark::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--brandmark-logo) center / contain no-repeat;
    mask: var(--brandmark-logo) center / contain no-repeat;
}

.automation-field__brandmark::before {
    inset: -8%;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92) 0%,
            rgba(255,113,161,.92) 28%,
            rgba(181,32,74,.96) 58%,
            rgba(86,210,255,.82) 100%
        );
    filter:
        blur(14px)
        saturate(1.15);
    opacity: .36;
    transform: scale(1.04);
    animation:
        automationBrandAura 6.4s ease-in-out infinite;
}

.automation-field__brandmark::after {
    background:
        linear-gradient(
            135deg,
            #f6f6f6 0%,
            #ff6a9d 24%,
            #b5204a 58%,
            #7ed7ff 100%
        );
    opacity: .92;
    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.24))
        drop-shadow(0 0 10px rgba(181,32,74,.38))
        drop-shadow(0 0 18px rgba(181,32,74,.24));
    animation:
        automationBrandFloat 7.2s ease-in-out infinite,
        automationBrandNeon 6.8s ease-in-out infinite;
}

.automation-field__brandmark img {
    display: none !important;
}

@keyframes automationBrandFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes automationBrandNeon {
    0%, 100% {
        opacity: .84;
        filter:
            hue-rotate(0deg)
            drop-shadow(0 0 6px rgba(255,255,255,.20))
            drop-shadow(0 0 12px rgba(181,32,74,.42))
            drop-shadow(0 0 24px rgba(181,32,74,.24));
    }
    35% {
        opacity: 1;
        filter:
            hue-rotate(8deg)
            drop-shadow(0 0 7px rgba(255,255,255,.28))
            drop-shadow(0 0 15px rgba(255,82,132,.52))
            drop-shadow(0 0 28px rgba(123,225,255,.22));
    }
    70% {
        opacity: .94;
        filter:
            hue-rotate(-10deg)
            drop-shadow(0 0 7px rgba(255,255,255,.26))
            drop-shadow(0 0 14px rgba(181,32,74,.44))
            drop-shadow(0 0 26px rgba(90,210,255,.26));
    }
}

@keyframes automationBrandAura {
    0%, 100% {
        opacity: .28;
        transform: scale(1.02);
        filter:
            blur(13px)
            hue-rotate(0deg);
    }
    50% {
        opacity: .48;
        transform: scale(1.08);
        filter:
            blur(16px)
            hue-rotate(10deg);
    }
}

@media (max-width:1000px) {
    .automation-field__brandmark {
        top: 47%;
        width: clamp(6.4rem, 15vw, 8.9rem);
    }
}

@media (max-width:767px) {
    .automation-field__brandmark {
        top: 39%;
        width: clamp(5.6rem, 24vw, 7.7rem);
    }

    .automation-field__brandmark::before {
        opacity: .30;
    }

    .automation-field__brandmark::after {
        opacity: .82;
    }
}

@media (max-width:479px) {
    .automation-field__brandmark {
        top: 36%;
        width: clamp(4.8rem, 28vw, 6.7rem);
    }
}

@media (prefers-reduced-motion:reduce) {
    .automation-field__brandmark::before,
    .automation-field__brandmark::after {
        animation: none !important;
    }
}


/* ================================================================
   BRANDMARK FIX V4
   - evita doble logo
   - baja intensidad del neón
================================================================ */

.automation-field__brandmark {
    position: absolute;
    left: 50%;
    top: 49%;
    z-index: 3;
    width: clamp(7rem, 11vw, 10rem);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    isolation: isolate;
}

.automation-field__brandmark img,
.automation-field__brandmark svg,
.automation-field__brandmark > * {
    display: none !important;
}

.automation-hud__core rect {
    display: none !important;
}

.automation-field__brandmark::before,
.automation-field__brandmark::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--brandmark-logo) center / contain no-repeat;
    mask: var(--brandmark-logo) center / contain no-repeat;
}

.automation-field__brandmark::before {
    inset: -6%;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.55) 0%,
            rgba(214,95,138,.52) 28%,
            rgba(181,32,74,.58) 60%,
            rgba(88,186,230,.38) 100%
        );
    filter: blur(12px);
    opacity: .18;
    transform: scale(1.03);
    animation: automationBrandAuraSoft 7s ease-in-out infinite;
}

.automation-field__brandmark::after {
    background:
        linear-gradient(
            135deg,
            rgba(238,238,238,.86) 0%,
            rgba(216,103,143,.74) 24%,
            rgba(181,32,74,.76) 58%,
            rgba(110,194,232,.46) 100%
        );
    opacity: .56;
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.08))
        drop-shadow(0 0 8px rgba(181,32,74,.14))
        drop-shadow(0 0 14px rgba(181,32,74,.10));
    animation:
        automationBrandFloatSoft 7.6s ease-in-out infinite,
        automationBrandNeonSoft 7.4s ease-in-out infinite;
}

@keyframes automationBrandFloatSoft {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes automationBrandNeonSoft {
    0%, 100% {
        opacity: .52;
        filter:
            hue-rotate(0deg)
            drop-shadow(0 0 4px rgba(255,255,255,.05))
            drop-shadow(0 0 8px rgba(181,32,74,.12))
            drop-shadow(0 0 14px rgba(181,32,74,.08));
    }
    50% {
        opacity: .66;
        filter:
            hue-rotate(8deg)
            drop-shadow(0 0 5px rgba(255,255,255,.08))
            drop-shadow(0 0 10px rgba(181,32,74,.16))
            drop-shadow(0 0 18px rgba(88,186,230,.10));
    }
}

@keyframes automationBrandAuraSoft {
    0%, 100% {
        opacity: .14;
        transform: scale(1.02);
        filter: blur(12px) hue-rotate(0deg);
    }
    50% {
        opacity: .24;
        transform: scale(1.06);
        filter: blur(14px) hue-rotate(8deg);
    }
}

@media (max-width:1000px) {
    .automation-field__brandmark {
        top: 47%;
        width: clamp(6.2rem, 15vw, 8.7rem);
    }
}

@media (max-width:767px) {
    .automation-field__brandmark {
        top: 39%;
        width: clamp(5.4rem, 24vw, 7.4rem);
    }

    .automation-field__brandmark::before {
        opacity: .14;
    }

    .automation-field__brandmark::after {
        opacity: .48;
    }
}

@media (max-width:479px) {
    .automation-field__brandmark {
        top: 36%;
        width: clamp(4.8rem, 28vw, 6.5rem);
    }
}

@media (prefers-reduced-motion:reduce) {
    .automation-field__brandmark::before,
    .automation-field__brandmark::after {
        animation: none !important;
    }
}