/* AP Neural Web — Index Page Bundle */

/* SOURCE: pages/home.css */
/* AP Neural Web — Home Complete / Story System V1 */

/* ================================================================
   LAYERING / STORY BACKGROUND
================================================================ */

.site-main {
    position: relative;
    z-index: 1;
    isolation: auto;
}

.ap-story-map {
    --map-opacity: .92;
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    opacity: var(--map-opacity);
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(139,21,56,.052), transparent 31%),
        radial-gradient(circle at 50% 50%, rgba(243,243,241,.012), transparent 52%),
        transparent;
}

.ap-story-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(8,9,11,0) 0%,
            rgba(8,9,11,.08) 52%,
            rgba(8,9,11,.30) 100%
        );
    pointer-events: none;
}

.ap-story-map__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
    transform-origin: 50% 50%;
    will-change: transform;
}

.ap-map__orbit,
.ap-map__ambient-arc,
.ap-map__guide,
.ap-map__fragment,
.ap-map__route-glow,
.ap-map__route,
.ap-map__route-confirmed,
.ap-map__core-ring,
.ap-map__scan,
.ap-map__axis,
.ap-map__rail,
.ap-map__branch,
.ap-map__process-line,
.ap-map__process-segment,
.ap-map__loop-path,
.ap-map__loop-arrow,
.ap-map__evidence-line,
.ap-map__evidence-checkmark,
.ap-map__output-line,
.ap-map__output-arrow {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.ap-map__halo {
    opacity: .88;
}

.ap-map__orbit {
    stroke: rgba(151,154,162,.18);
    stroke-width: 1;
}

.ap-map__orbit--a { animation: mapOrbitA 18s ease-in-out infinite; }
.ap-map__orbit--b { animation: mapOrbitB 15s ease-in-out infinite; }
.ap-map__orbit--c { animation: mapOrbitC 12s ease-in-out infinite; }

.ap-map__ambient-arc {
    stroke: rgba(151,154,162,.11);
    stroke-width: 1;
}

.ap-map__guide {
    stroke: rgba(151,154,162,.24);
    stroke-width: 1;
    stroke-dasharray: 4 13;
}

.ap-map__node {
    fill: #08090b;
    stroke: rgba(151,154,162,.72);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.ap-map__node--accent {
    stroke: #B5204A;
    stroke-width: 2;
}

.ap-map__fragment {
    stroke: rgba(151,154,162,.42);
    stroke-width: 1;
}

.ap-map__fragment--a { animation: mapFragmentA 5.4s ease-in-out infinite; }
.ap-map__fragment--b { animation: mapFragmentB 6.1s ease-in-out infinite; }
.ap-map__fragment--c { animation: mapFragmentC 5.8s ease-in-out infinite; }
.ap-map__fragment--d { animation: mapFragmentD 6.5s ease-in-out infinite; }

.ap-map__route-glow,
.ap-map__route,
.ap-map__route-confirmed {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.ap-map__route-glow {
    stroke: rgba(181,32,74,.22);
    stroke-width: 13;
}

.ap-map__route {
    stroke: #B5204A;
    stroke-width: 2.4;
}

.ap-map__route-confirmed {
    stroke: rgba(243,243,241,.78);
    stroke-width: 1.35;
    opacity: 0;
}

.ap-map__traveler {
    fill: #F3F3F1;
    stroke: #B5204A;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    filter: url(#apMapGlow);
}

.ap-map__core,
.ap-map__structure,
.ap-map__branches,
.ap-map__process,
.ap-map__loop,
.ap-map__evidence,
.ap-map__output {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    will-change: opacity, transform;
}

.ap-map__core-ring {
    stroke: rgba(181,32,74,.72);
    stroke-width: 1.35;
}

.ap-map__core-ring--inner {
    stroke: rgba(243,243,241,.16);
}

.ap-map__scan {
    stroke: rgba(181,32,74,.36);
    stroke-width: 1.3;
    stroke-dasharray: 36 550;
    transform-origin: 822px 474px;
    animation: mapScan 6s linear infinite;
}

.ap-map__axis {
    stroke: rgba(243,243,241,.16);
    stroke-width: 1;
}

.ap-map__core-dot,
.ap-map__port,
.ap-map__branch-node,
.ap-map__output-dot {
    fill: #B5204A;
}

.ap-map__tick {
    fill: rgba(243,243,241,.72);
}

.ap-map__rail {
    stroke: rgba(151,154,162,.25);
    stroke-width: 1;
}

.ap-map__block {
    fill: rgba(24,25,29,.3);
    stroke: rgba(151,154,162,.3);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ap-map__block--active {
    fill: rgba(139,21,56,.13);
    stroke: rgba(181,32,74,.82);
}

.ap-map__structure-item {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    will-change: opacity, transform;
}

.ap-map__block-text {
    fill: rgba(243,243,241,.72);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.ap-map__block-text--active {
    fill: rgba(243,243,241,.92);
}

.ap-map__branch {
    stroke: rgba(243,243,241,.38);
    stroke-width: 1.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.ap-map__branch-node {
    opacity: .9;
}

.ap-map__process-line {
    stroke: rgba(151,154,162,.2);
    stroke-width: 1;
}

.ap-map__process-segment {
    stroke: rgba(181,32,74,.58);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 5px rgba(181,32,74,.14));
}

.ap-map__process-node {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    will-change: opacity;
}

.ap-map__process-node circle {
    fill: #08090b;
    stroke: rgba(181,32,74,.72);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.ap-map__process-node text {
    fill: rgba(243,243,241,.72);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 650;
    text-anchor: middle;
}

.ap-map__loop-path {
    stroke: rgba(181,32,74,.72);
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.ap-map__loop-arrow {
    stroke: rgba(181,32,74,.72);
    stroke-width: 1.5;
}

.ap-map__evidence-card {
    fill: rgba(16,17,20,.72);
    stroke: rgba(151,154,162,.3);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ap-map__evidence-line {
    stroke: rgba(151,154,162,.38);
    stroke-width: 1;
}

.ap-map__evidence-check {
    fill: rgba(139,21,56,.15);
    stroke: rgba(181,32,74,.8);
    stroke-width: 1;
}

.ap-map__evidence-checkmark {
    stroke: #F3F3F1;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ap-map__output-line,
.ap-map__output-arrow {
    stroke: rgba(243,243,241,.7);
    stroke-width: 1.3;
}

.ap-story-map__meta {
    position: absolute;
    right: clamp(1rem, 3vw, 3rem);
    bottom: clamp(1rem, 3vw, 2.3rem);
    z-index: 2;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-mono);
    font-size: .61rem;
    line-height: 1;
    letter-spacing: .11em;
    color: rgba(151,154,162,.58);
    text-transform: uppercase;
}

.ap-story-map__meta::before {
    content: "";
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #8B1538, rgba(139,21,56,0));
}

.ap-story-map__meta strong {
    color: rgba(243,243,241,.72);
    font-weight: 600;
}

.ap-story-map__meta i {
    color: rgba(181,32,74,.86);
    font-style: normal;
}

/* ================================================================
   STORY SECTION FOUNDATION
================================================================ */

.story-section {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: clip;
}

.story-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(8,9,11,.94) 0%,
            rgba(8,9,11,.80) 21%,
            rgba(8,9,11,.36) 34%,
            rgba(8,9,11,.04) 49%,
            rgba(8,9,11,.05) 61%,
            rgba(8,9,11,.18) 78%,
            rgba(8,9,11,.35) 100%
        );
    pointer-events: none;
}

.story-section:nth-of-type(even)::after {
    content: "";
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(52,54,61,.42), rgba(52,54,61,0));
    pointer-events: none;
}

.story-layout {
    width: 100%;
}

.story-copy {
    width: min(55vw, 48rem);
}

.story-copy--wide {
    width: min(64vw, 62rem);
}

.story-title {
    max-width: 12ch;
    margin-bottom: clamp(1.5rem, 2.5vw, 2.2rem);
    font-size: clamp(2.75rem, 5.4vw, 6.1rem);
    font-weight: 650;
    line-height: .92;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.story-title span {
    color: var(--color-accent-hover);
}

.story-lead {
    max-width: 43rem;
    margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
    font-size: clamp(1.02rem, .96rem + .35vw, 1.28rem);
    line-height: 1.68;
    color: var(--color-text-muted);
}

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

.home-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(7.2rem, 10vw, 9rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero-grid { width: 100%; }

.hero-copy {
    width: min(62vw, 58rem);
}

.hero-kicker { margin-bottom: clamp(1.2rem, 2vw, 2rem); }

.hero-title {
    max-width: 15.5ch;
    margin-bottom: clamp(1.4rem, 2vw, 2rem);
    font-size: clamp(3rem, 4.65vw, 5rem);
    font-weight: 650;
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.hero-title > span { display: block; }
.hero-title__accent { color: var(--color-accent-hover); }

.hero-copy__text {
    max-width: 38rem;
    margin-bottom: clamp(1.5rem, 2.2vw, 2rem);
    font-size: clamp(1rem, .96rem + .25vw, 1.2rem);
    line-height: 1.66;
    color: var(--color-text-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.hero-principle {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    max-width: 35rem;
    margin: 1.2rem 0 0;
    font-family: var(--font-mono);
    font-size: clamp(.7rem, .66rem + .1vw, .8rem);
    line-height: 1.55;
    letter-spacing: .045em;
    color: rgba(151,154,162,.76);
}

.hero-principle > span {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1px;
    margin-top: .72em;
    background: var(--color-accent);
}

/* ================================================================
   NEED SELECTOR
================================================================ */

.signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.signal-card {
    position: relative;
    display: grid;
    gap: .65rem;
    min-height: 12rem;
    padding: 1.35rem;
    text-align: left;
    color: var(--color-text);
    background: rgba(16,17,20,.68);
    border: 1px solid rgba(52,54,61,.72);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        transform var(--duration-normal) var(--ease-ap),
        border-color var(--duration-normal) var(--ease-ap),
        background var(--duration-normal) var(--ease-ap);
}

.signal-card::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 2.3rem;
    height: 1px;
    background: var(--color-border);
    transition: width var(--duration-normal) var(--ease-ap), background var(--duration-normal) var(--ease-ap);
}

.signal-card:hover,
.signal-card:focus-visible,
.signal-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(181,32,74,.78);
    background: rgba(24,25,29,.78);
}

.signal-card.is-active::after {
    width: 4rem;
    background: var(--color-accent-hover);
}

.signal-card__index {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .12em;
    color: var(--color-accent-hover);
}

.signal-card strong {
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: clamp(1rem, .95rem + .25vw, 1.18rem);
    line-height: 1.2;
}

.signal-card small {
    align-self: end;
    max-width: 32ch;
    color: var(--color-text-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.signal-response {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .4rem 1.3rem;
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    background: rgba(8,9,11,.72);
    border-left: 2px solid var(--color-accent-hover);
}

.signal-response span {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.signal-response strong {
    font-size: .94rem;
}

.signal-response p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .9rem;
}

/* ================================================================
   PHILOSOPHY
================================================================ */

.principle-stack {
    display: grid;
    border-top: 1px solid rgba(52,54,61,.7);
}

.principle-row {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(52,54,61,.55);
}

.principle-row > span {
    font-family: var(--font-mono);
    color: var(--color-accent-hover);
    font-size: .7rem;
}

.principle-row strong {
    display: block;
    margin-bottom: .35rem;
    font-size: 1.05rem;
}

.principle-row p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .93rem;
}

/* ================================================================
   CAPABILITIES / RESPONSES
================================================================ */

.response-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.response-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 19rem;
    padding: clamp(1.3rem, 2vw, 1.7rem);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(16,17,20,.78), rgba(8,9,11,.58));
    border: 1px solid rgba(52,54,61,.7);
    border-radius: var(--radius-sm);
    transition:
        transform var(--duration-normal) var(--ease-ap),
        border-color var(--duration-normal) var(--ease-ap),
        background var(--duration-normal) var(--ease-ap);
}

.response-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent-hover);
    transition: width var(--duration-slow) var(--ease-ap);
}

.response-card:hover,
.response-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(181,32,74,.55);
    background: linear-gradient(145deg, rgba(24,25,29,.82), rgba(8,9,11,.62));
}

.response-card:hover::before,
.response-card:focus-visible::before { width: 72%; }

.response-card__code {
    margin-bottom: auto;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .13em;
    color: var(--color-accent-hover);
}

.response-card h3 {
    max-width: 23ch;
    margin: 2rem 0 .9rem;
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.85rem);
    line-height: 1.08;
}

.response-card p {
    color: var(--color-text-muted);
    font-size: .93rem;
}

.response-card > strong {
    margin-top: auto;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ================================================================
   SECTORS
================================================================ */

.sector-console {
    display: grid;
    grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr);
    border: 1px solid rgba(52,54,61,.72);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(8,9,11,.68);
}

.sector-console__nav {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(52,54,61,.65);
}

.sector-tab {
    position: relative;
    padding: 1.1rem 1.25rem;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(52,54,61,.5);
    text-align: left;
    cursor: pointer;
    transition: color var(--duration-fast) ease, background var(--duration-normal) var(--ease-ap);
}

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

.sector-tab.is-active {
    color: var(--color-text);
    background: rgba(139,21,56,.11);
}

.sector-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--color-accent-hover);
}

.sector-console__panel {
    min-height: 22rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.sector-console__panel > span {
    font-family: var(--font-mono);
    font-size: .63rem;
    letter-spacing: .12em;
    color: var(--color-accent-hover);
    text-transform: uppercase;
}

.sector-console__panel h3 {
    margin: 2.2rem 0 1rem;
    font-size: clamp(1.8rem, 1.4rem + 1.3vw, 3rem);
}

.sector-console__panel p {
    max-width: 42rem;
    color: var(--color-text-muted);
}

.sector-console__panel ul {
    display: grid;
    gap: .75rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.sector-console__panel li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    color: var(--color-text-soft);
}

.sector-console__panel li::before {
    content: "";
    width: 1.4rem;
    height: 1px;
    background: var(--color-accent);
}

/* ================================================================
   PROCESS
================================================================ */

.process-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 2.3rem;
}

.process-rail::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(52,54,61,.7));
}

.process-step {
    position: relative;
    z-index: 1;
    min-height: 14rem;
    padding: 1.1rem;
    background: rgba(8,9,11,.8);
    border: 1px solid rgba(52,54,61,.62);
    border-radius: var(--radius-sm);
}

.process-step > span {
    display: grid;
    place-items: center;
    width: 2.2rem;
    aspect-ratio: 1;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: .64rem;
    color: var(--ap-white);
    background: var(--color-accent-deep);
    border: 1px solid var(--color-accent-hover);
    border-radius: 50%;
}

.process-step strong {
    display: block;
    margin-bottom: .55rem;
}

.process-step p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .84rem;
}

/* ================================================================
   CONTINUITY
================================================================ */

.continuity-loop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 2rem 0 2rem;
    padding: 1.25rem;
    border: 1px solid rgba(52,54,61,.65);
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
    background: rgba(8,9,11,.65);
}

.continuity-loop span {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.continuity-loop i {
    color: var(--color-accent-hover);
    font-style: normal;
}

/* ================================================================
   PROJECTS
================================================================ */

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 2rem;
}

.project-card {
    position: relative;
    min-height: 18rem;
    padding: 1.35rem;
    overflow: hidden;
    background: rgba(16,17,20,.7);
    border: 1px solid rgba(52,54,61,.66);
    border-radius: var(--radius-sm);
}

.project-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: .61rem;
    letter-spacing: .11em;
    color: var(--color-text-muted);
}

.project-card__meta span:last-child { color: var(--color-accent-hover); }

.project-card h3 {
    margin: 4.5rem 0 1rem;
    font-size: clamp(1.45rem, 1.2rem + .8vw, 2rem);
}

.project-card p {
    color: var(--color-text-muted);
    font-size: .9rem;
}

.project-card__line {
    position: absolute;
    right: 1.35rem;
    bottom: 1.35rem;
    left: 1.35rem;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(52,54,61,.35));
}

/* ================================================================
   DIAGNOSTIC
================================================================ */

.diagnostic-panel {
    width: min(64vw, 63rem);
    padding: clamp(1.5rem, 4vw, 3.4rem);
    background:
        linear-gradient(135deg, rgba(24,25,29,.92), rgba(8,9,11,.82));
    border: 1px solid rgba(181,32,74,.38);
    border-radius: var(--radius-md);
    box-shadow: 0 2rem 5rem rgba(0,0,0,.18);
}

.diagnostic-panel .story-title { max-width: 12.5ch; }

.diagnostic-panel__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.diagnostic-panel__actions > span {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* ================================================================
   COMPANY
================================================================ */

.company-signals {
    display: grid;
    gap: .65rem;
    margin: 2rem 0;
}

.company-signals > div {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(52,54,61,.52);
}

.company-signals span {
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--color-accent-hover);
}

.company-signals strong { font-size: .95rem; }

/* ================================================================
   CONTACT
================================================================ */

.story-section--contact {
    min-height: 76vh;
    min-height: 76svh;
}

.contact-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
}

.contact-split .story-title { margin-bottom: 0; }

.contact-split__body {
    padding-top: 2rem;
    border-top: 1px solid rgba(52,54,61,.7);
}

.contact-split__body p {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.contact-split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

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

.site-footer {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 6vw, 5.5rem) 0 1.5rem;
    background: #08090b;
    border-top: 1px solid rgba(52,54,61,.6);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 8vw, 9rem);
}

.site-footer__brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

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

.site-footer__brand strong {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.site-footer__brand > div span {
    color: var(--color-text-muted);
    font-size: .82rem;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.site-footer__nav > div {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.site-footer__nav strong {
    margin-bottom: .3rem;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .12em;
    color: var(--color-accent-hover);
    text-transform: uppercase;
}

.site-footer__nav a {
    width: max-content;
    max-width: 100%;
    color: var(--color-text-muted);
    font-size: .88rem;
    transition: color var(--duration-fast) ease;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { color: var(--color-text); }

.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,.5);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    color: rgba(151,154,162,.58);
    text-transform: uppercase;
}


/* ================================================================
   NARRATIVE RHYTHM — the map stays central while content moves
================================================================ */

.story-section--philosophy::before,
.story-section--sectors::before,
.story-section--company::before {
    background:
        linear-gradient(
            270deg,
            rgba(8,9,11,.95) 0%,
            rgba(8,9,11,.80) 21%,
            rgba(8,9,11,.36) 34%,
            rgba(8,9,11,.04) 49%,
            rgba(8,9,11,.05) 61%,
            rgba(8,9,11,.18) 78%,
            rgba(8,9,11,.35) 100%
        );
}

.story-section--philosophy .story-copy,
.story-section--company .story-copy {
    width: min(43vw, 42rem);
    margin-left: auto;
}

.story-section--sectors .story-copy {
    width: min(61vw, 58rem);
    margin-left: auto;
}

.story-section--capabilities .story-copy--wide,
.story-section--process .story-copy--wide,
.story-section--projects .story-copy--wide {
    width: min(74vw, 70rem);
}

.story-section--diagnostic .diagnostic-panel {
    margin-inline: auto;
}

.hero-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    color: rgba(151,154,162,.62);
    text-transform: uppercase;
}

.hero-scroll-cue i {
    position: relative;
    width: 4.5rem;
    height: 1px;
    overflow: hidden;
    background: rgba(52,54,61,.5);
}

.hero-scroll-cue i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--color-accent-hover), transparent);
    transform: translateX(-100%);
    animation: heroCue 2.7s ease-in-out infinite;
}

@keyframes heroCue {
    60%, 100% { transform: translateX(100%); }
}

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 1099px) {
    .story-copy,
    .story-copy--wide,
    .hero-copy,
    .diagnostic-panel {
        width: min(72vw, 48rem);
    }

    .ap-story-map { --map-opacity: .66; }

    .ap-story-map__svg {
        transform: translateX(0) scale(1.04);
        transform-origin: 50% 52%;
    }

    .process-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .process-rail::before { display: none; }

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

@media (max-width: 767px) {
    /*
     * MOBILE MAP COMPOSITION
     * ----------------------
     * En móvil el mapa deja de intentar llenar un viewport vertical
     * con la composición 16:9 de escritorio. Se convierte en una
     * banda de sistema centrada, visible y respirable detrás del texto.
     */
    .ap-story-map {
        --map-opacity: .68;
        overflow: hidden;
        background:
            radial-gradient(
                ellipse at 50% 62%,
                rgba(139,21,56,.075),
                transparent 42%
            );
    }

    .ap-story-map::after {
        background:
            linear-gradient(
                180deg,
                rgba(8,9,11,.18) 0%,
                rgba(8,9,11,.04) 36%,
                rgba(8,9,11,.02) 64%,
                rgba(8,9,11,.20) 100%
            );
    }

    .ap-story-map__svg {
        inset: auto;
        left: 50%;
        top: 62%;
        width: 136vw;
        height: 70.2vw;
        max-width: none;
        max-height: none;
        overflow: visible;
        transform-origin: 50% 50%;
        filter: saturate(1.08) contrast(1.04);
    }

    .ap-map__orbit {
        stroke: rgba(151,154,162,.24);
    }

    .ap-map__guide {
        stroke: rgba(151,154,162,.34);
    }

    .ap-map__fragment {
        stroke: rgba(151,154,162,.52);
    }

    .ap-map__route-glow {
        stroke: rgba(181,32,74,.26);
        stroke-width: 15;
    }

    .ap-map__route {
        stroke-width: 3;
    }

    .ap-map__core-ring {
        stroke-width: 1.8;
    }

    .ap-map__block {
        fill: rgba(24,25,29,.52);
        stroke: rgba(151,154,162,.46);
    }

    .ap-map__block--active {
        fill: rgba(139,21,56,.22);
        stroke: rgba(181,32,74,.94);
    }

    .ap-map__block-text {
        font-size: 14px;
        letter-spacing: .035em;
    }

    .ap-map__process-node text {
        font-size: 14px;
    }

    .ap-map__process-node circle {
        stroke-width: 1.8;
    }

    .ap-map__process-segment {
        stroke-width: 1.65;
    }

    .ap-story-map__meta { display: none; }

    .story-section {
        min-height: auto;
        padding-top: clamp(5.5rem, 15vw, 7rem);
        padding-bottom: clamp(5rem, 15vw, 7rem);
    }

    .home-hero {
        min-height: 100svh;
        padding-top: 7rem;
        padding-bottom: 3.5rem;
    }

    .story-section::before {
        background:
            linear-gradient(
                180deg,
                rgba(8,9,11,.94) 0%,
                rgba(8,9,11,.86) 38%,
                rgba(8,9,11,.54) 62%,
                rgba(8,9,11,.18) 100%
            );
    }

    .story-copy,
    .story-copy--wide,
    .hero-copy,
    .diagnostic-panel {
        width: 100%;
    }
    .story-section--philosophy .story-copy,
    .story-section--sectors .story-copy,
    .story-section--company .story-copy,
    .story-section--capabilities .story-copy--wide,
    .story-section--process .story-copy--wide,
    .story-section--projects .story-copy--wide {
        width: 100%;
        margin-left: 0;
    }

    .story-section--philosophy::before,
    .story-section--sectors::before,
    .story-section--company::before {
        background:
            linear-gradient(
                180deg,
                rgba(8,9,11,.94) 0%,
                rgba(8,9,11,.86) 38%,
                rgba(8,9,11,.54) 62%,
                rgba(8,9,11,.18) 100%
            );
    }


    .hero-title {
        max-width: 10.8ch;
        font-size: clamp(2.65rem, 12vw, 4.45rem);
        line-height: .92;
    }

    .story-title {
        max-width: 11.5ch;
        font-size: clamp(2.35rem, 10.5vw, 4rem);
    }

    .hero-actions,
    .contact-split__actions,
    .diagnostic-panel__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .signal-grid,
    .response-grid,
    .project-grid {
        grid-template-columns: 1fr;
    }

    .signal-card { min-height: 10.5rem; }

    .signal-response {
        grid-template-columns: 1fr;
    }

    .signal-response span { grid-row: auto; }

    .sector-console {
        grid-template-columns: 1fr;
    }

    .sector-console__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid rgba(52,54,61,.65);
    }

    .sector-tab:nth-child(odd) { border-right: 1px solid rgba(52,54,61,.5); }

    .process-rail {
        grid-template-columns: 1fr;
    }

    .process-step { min-height: auto; }

    .continuity-loop {
        width: 100%;
        border-radius: var(--radius-sm);
    }

    .contact-split,
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

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

    .site-footer__bottom {
        flex-direction: column;
    }
}

@media (max-width: 479px) {
    .ap-story-map { --map-opacity: .72; }

    .ap-story-map__svg {
        top: 64%;
        width: 142vw;
        height: 73.3vw;
    }

    .ap-map__block-text {
        font-size: 14.5px;
        letter-spacing: .02em;
    }

    .ap-map__process-node text {
        font-size: 15px;
    }

    .hero-title { font-size: clamp(2.35rem, 12.7vw, 3.7rem); }
    .story-title { font-size: clamp(2.15rem, 10.6vw, 3.4rem); }

    .sector-console__nav { grid-template-columns: 1fr; }
    .sector-tab:nth-child(odd) { border-right: 0; }

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

    .project-card { min-height: 16rem; }
}

@media (max-width: 359px) {
    .hero-title { font-size: 2.2rem; }
    .story-title { font-size: 2rem; }
}

@media (max-height: 760px) and (min-width: 960px) {
    .home-hero { padding-top: 6.4rem; padding-bottom: 2.3rem; }
    .hero-title { font-size: clamp(3rem, 5.2vw, 5.35rem); }
    .story-section { min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-map__orbit--a,
    .ap-map__orbit--b,
    .ap-map__orbit--c,
    .ap-map__scan,
    .ap-map__fragment--a,
    .ap-map__fragment--b,
    .ap-map__fragment--c,
    .ap-map__fragment--d,
    .hero-scroll-cue i::after {
        animation: none;
    }
}

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

@keyframes mapOrbitA {
    50% { transform: translate(7px, -7px); opacity: .84; }
}
@keyframes mapOrbitB {
    50% { transform: translate(-6px, 4px); opacity: .92; }
}
@keyframes mapOrbitC {
    50% { transform: translate(4px, 5px); opacity: .9; }
}
@keyframes mapScan {
    to { transform: rotate(360deg); }
}
@keyframes mapFragmentA {
    50% { transform: translate(4px, -5px); }
}
@keyframes mapFragmentB {
    50% { transform: translate(-5px, 3px); }
}
@keyframes mapFragmentC {
    50% { transform: translate(3px, 5px); }
}
@keyframes mapFragmentD {
    50% { transform: translate(-3px, -4px); }
}


/* === HOME COMPLETE V2 — CENTER MAP VISIBILITY === */
.ap-story-map::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(8rem, 14vw, 13rem);
    aspect-ratio: 1;
    border: 1px solid rgba(181,32,74,.10);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6rem rgba(139,21,56,.055);
    pointer-events: none;
}

.story-section {
    scroll-margin-top: 7rem;
}

/* === AP MOBILE CARD MOTION V5 START === */

/* ================================================================
   CARD MOTION SYSTEM
   Giro 3D corto ligado al scroll. Nunca se convierte en una
   pirueta decorativa: entra con profundidad y se estabiliza.
================================================================ */

.ap-scroll-card {
    --card-ty: 0px;
    --card-rx: 0deg;
    --card-ry: 0deg;
    --card-rz: 0deg;
    --card-scale: 1;
    --card-hover-y: 0px;

    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;

    transform:
        perspective(950px)
        translate3d(0, calc(var(--card-ty) + var(--card-hover-y)), 0)
        rotateX(var(--card-rx))
        rotateY(var(--card-ry))
        rotateZ(var(--card-rz))
        scale(var(--card-scale)) !important;

    transition:
        border-color var(--duration-normal) var(--ease-ap),
        background var(--duration-normal) var(--ease-ap),
        box-shadow var(--duration-normal) var(--ease-ap),
        --card-hover-y var(--duration-fast) var(--ease-ap);
}

.signal-card.ap-scroll-card:hover,
.signal-card.ap-scroll-card:focus-visible,
.signal-card.ap-scroll-card.is-active,
.response-card.ap-scroll-card:hover,
.response-card.ap-scroll-card:focus-visible,
.project-card.ap-scroll-card:hover,
.project-card.ap-scroll-card:focus-visible,
.process-step.ap-scroll-card:hover,
.process-step.ap-scroll-card:focus-within {
    --card-hover-y: -3px;
}

.signal-card.ap-scroll-card,
.response-card.ap-scroll-card,
.project-card.ap-scroll-card,
.process-step.ap-scroll-card {
    box-shadow:
        0 .75rem 2.4rem rgba(0,0,0,.08),
        inset 0 1px 0 rgba(243,243,241,.018);
}

.signal-card.ap-scroll-card:hover,
.response-card.ap-scroll-card:hover,
.project-card.ap-scroll-card:hover,
.process-step.ap-scroll-card:hover {
    box-shadow:
        0 1rem 3rem rgba(0,0,0,.16),
        0 0 0 1px rgba(181,32,74,.055),
        inset 0 1px 0 rgba(243,243,241,.03);
}

/* brillo corto que acompaña la inclinación */
.ap-scroll-card::selection {
    background: rgba(181,32,74,.35);
}


/* ================================================================
   MOBILE CARD WIDTH / DENSITY
================================================================ */

@media (max-width: 767px) {

    .signal-grid,
    .response-grid,
    .project-grid {
        width: min(calc(100% - .45rem), 32rem);
        margin-inline: auto;
        gap: .72rem;
    }

    .signal-card,
    .response-card,
    .project-card,
    .process-step {
        width: 100%;
        min-width: 0;
        border-radius: 11px;
    }

    .signal-card {
        min-height: 9.25rem;
        padding: 1.05rem 1.1rem;
    }

    .signal-card strong {
        max-width: 23ch;
    }

    .signal-card small {
        max-width: 28ch;
    }

    .response-card {
        min-height: 15.5rem;
        padding: 1.15rem;
    }

    .response-card h3 {
        max-width: 16ch;
    }

    .project-card {
        min-height: 15rem;
        padding: 1.15rem;
    }

    .project-card h3 {
        margin-top: 3.6rem;
    }

    .process-rail {
        width: min(calc(100% - .45rem), 32rem);
        margin-inline: auto;
    }

    .process-step {
        padding: 1rem 1.05rem;
    }

    .sector-console {
        width: min(calc(100% - .25rem), 34rem);
        margin-inline: auto;
    }
}

@media (max-width: 479px) {

    .signal-grid,
    .response-grid,
    .project-grid,
    .process-rail {
        width: calc(100% - .7rem);
    }

    .signal-card,
    .response-card,
    .project-card,
    .process-step {
        border-radius: 10px;
    }

    .signal-card {
        min-height: 8.8rem;
        padding: 1rem;
    }

    .response-card {
        min-height: 14.5rem;
    }

    .project-card {
        min-height: 14.25rem;
    }
}

@media (max-width: 359px) {

    .signal-grid,
    .response-grid,
    .project-grid,
    .process-rail {
        width: calc(100% - .45rem);
    }

    .signal-card,
    .response-card,
    .project-card,
    .process-step {
        padding-inline: .9rem;
    }
}

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

    .ap-scroll-card {
        --card-ty: 0px !important;
        --card-rx: 0deg !important;
        --card-ry: 0deg !important;
        --card-rz: 0deg !important;
        --card-scale: 1 !important;
        --card-hover-y: 0px !important;

        transform: none !important;
        will-change: auto;
    }
}

/* === AP MOBILE CARD MOTION V5 END === */

/* === AP HOME CTA MOBILE V6 START === */

/* ================================================================
   HOME CTA SYSTEM
   Los botones del contenido tienen su propio lenguaje. El header y
   el menú móvil conservan el sistema de navegación V5.
================================================================ */

.site-main .ap-button {
    --cta-arrow-x: -5px;
    --cta-arrow-y: 0px;
    --cta-arrow-opacity: .48;
    --cta-rail-scale: .22;

    position: relative;
    isolation: isolate;

    padding-right: 2.85rem;

    justify-content: flex-start;
    gap: .8rem;

    box-shadow:
        0 .5rem 1.6rem rgba(0,0,0,.06),
        inset 0 1px 0 rgba(243,243,241,.018);

    transition:
        border-color var(--duration-normal) var(--ease-ap),
        background var(--duration-normal) var(--ease-ap),
        box-shadow var(--duration-normal) var(--ease-ap),
        transform var(--duration-fast) var(--ease-ap);
}

/* pequeña guía que se completa cuando el CTA entra en pantalla */
.site-main .ap-button::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 50%;
    right: .78rem;

    width: 1.35rem;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(243,243,241,0),
            currentColor
        );

    opacity: .34;

    transform:
        translateY(-50%)
        scaleX(var(--cta-rail-scale));

    transform-origin: right center;

    pointer-events: none;
}

.site-main .ap-button::after {
    content: "→";

    position: absolute;
    z-index: 3;

    top: 50%;
    right: .76rem;

    width: 1rem;

    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1;
    text-align: right;

    opacity: var(--cta-arrow-opacity);

    transform:
        translate(
            var(--cta-arrow-x),
            calc(-50% + var(--cta-arrow-y))
        );

    transition:
        transform 280ms var(--ease-ap),
        opacity 220ms ease,
        color 220ms ease;

    pointer-events: none;
}

/* El CTA que continúa por la misma página comunica desplazamiento */
.site-main .ap-button--scroll {
    padding-right: 2.7rem;
}

.site-main .ap-button--scroll::before {
    top: 50%;
    right: 1.02rem;

    width: 1px;
    height: .92rem;

    background:
        linear-gradient(
            180deg,
            rgba(243,243,241,0),
            currentColor
        );

    transform:
        translateY(-58%)
        scaleY(var(--cta-rail-scale));

    transform-origin: center bottom;
}

.site-main .ap-button--scroll::after {
    content: "↓";
    right: .76rem;
    text-align: center;
}

.site-main .ap-button:hover,
.site-main .ap-button:focus-visible {
    box-shadow:
        0 .8rem 2.3rem rgba(0,0,0,.14),
        0 0 0 1px rgba(181,32,74,.055),
        inset 0 1px 0 rgba(243,243,241,.035);
}

.site-main .ap-button:not(.ap-button--scroll):hover::after,
.site-main .ap-button:not(.ap-button--scroll):focus-visible::after {
    opacity: 1;
    transform: translate(.28rem, -50%);
}

.site-main .ap-button--scroll:hover::after,
.site-main .ap-button--scroll:focus-visible::after {
    opacity: 1;
    transform: translate(0, calc(-50% + .22rem));
}

.site-main .ap-button:active {
    transform: translateY(1px) scale(.985);
}

/* ================================================================
   MOBILE CTA DENSITY
   Compactos, pero conservando 44px de área táctil.
================================================================ */

@media (max-width: 767px) {

    .hero-actions,
    .contact-split__actions,
    .diagnostic-panel__actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .55rem;
    }

    .site-main .ap-button {
        width: fit-content !important;
        max-width: 100%;

        min-height: 2.75rem;

        padding:
            .62rem
            2.35rem
            .62rem
            .78rem;

        gap: .55rem;

        border-radius: 8px;

        font-size: .67rem;
        line-height: 1.15;
        letter-spacing: .035em;

        white-space: normal;
    }

    .site-main .ap-button::before {
        right: .63rem;
        width: 1.05rem;
    }

    .site-main .ap-button::after {
        right: .62rem;
        font-size: .72rem;
    }

    .site-main .ap-button--scroll {
        padding-right: 2.18rem;
    }

    .site-main .ap-button--scroll::before {
        right: .86rem;
        height: .78rem;
    }

    .site-main .ap-button--scroll::after {
        right: .60rem;
    }

    .diagnostic-panel__actions > span {
        flex: 1 1 100%;
        margin-top: .1rem;
    }

    /* El primario mantiene jerarquía sin convertirse en una barra. */
    .site-main .ap-button--primary {
        box-shadow:
            0 .55rem 1.5rem rgba(88,11,35,.18),
            inset 0 1px 0 rgba(255,255,255,.035);
    }
}

@media (max-width: 479px) {

    .hero-actions,
    .contact-split__actions,
    .diagnostic-panel__actions {
        gap: .48rem;
    }

    .site-main .ap-button {
        min-height: 2.75rem;

        padding:
            .58rem
            2.18rem
            .58rem
            .72rem;

        font-size: .635rem;
        letter-spacing: .03em;
    }

    .site-main .ap-button--scroll {
        padding-right: 2.04rem;
    }
}

@media (max-width: 359px) {

    .site-main .ap-button {
        max-width: 100%;
        padding-left: .68rem;
        font-size: .61rem;
    }
}

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

    .site-main .ap-button {
        --cta-arrow-x: 0px !important;
        --cta-arrow-y: 0px !important;
        --cta-arrow-opacity: 1 !important;
        --cta-rail-scale: 1 !important;
    }

    .site-main .ap-button::after,
    .site-main .ap-button::before {
        transition: none !important;
    }
}

/* === AP HOME CTA MOBILE V6 END === */


/* AP TECH VERIFICATION CSS START */


/* ================================================================
   AP NEURAL WEB — CALIDAD TÉCNICA VERIFICABLE
================================================================ */

.ap-tech-proof {
    position: relative;

    overflow: hidden;

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

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

    background:
        linear-gradient(
            180deg,
            rgba(8, 9, 11, .98),
            rgba(11, 12, 15, .98)
        );
}


/*
 * Estructura visual estática.
 * Sin puntos pulsantes ni adornos animados.
 */

.ap-tech-proof::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(243, 243, 241, .018)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 243, 241, .018)
            1px,
            transparent 1px
        );

    background-size:
        6rem
        6rem;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 35%,
            #000 65%,
            transparent
        );

    opacity: .7;
}


.ap-tech-proof
.ap-container {
    position: relative;

    z-index: 1;
}


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

.ap-tech-proof__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(18rem, .72fr);

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

    align-items: end;

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


.ap-tech-proof__header h2 {
    max-width: 54rem;

    margin: 0;

    font-size:
        clamp(
            2.6rem,
            5.8vw,
            6.6rem
        );

    line-height: .91;

    letter-spacing: -.055em;
}


.ap-tech-proof__header h2 span {
    display: block;

    color:
        var(--color-accent-hover);
}


.ap-tech-proof__header p {
    margin: 0;

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

    font-size:
        clamp(
            .92rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.75;
}


/* ================================================================
   CARDS
================================================================ */

.ap-tech-proof__grid {
    display: grid;

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

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

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


.ap-tech-proof__item {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height:
        clamp(
            25rem,
            34vw,
            31rem
        );

    padding:
        clamp(
            1.6rem,
            3.5vw,
            3.3rem
        );

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

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

    background:
        rgba(255, 255, 255, .012);

    transition:
        background-color
        260ms
        ease,
        border-color
        260ms
        ease;
}


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

    .ap-tech-proof__item:hover {
        background:
            rgba(181, 32, 74, .028);

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

}


/* Herramienta */

.ap-tech-proof__source {
    margin-bottom:
        clamp(
            2.2rem,
            5vw,
            4.5rem
        );

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

    font-size: .67rem;
    font-weight: 700;

    letter-spacing: .12em;

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

    text-transform: uppercase;
}


.ap-tech-proof__item h3 {
    max-width: 30rem;

    margin:
        0
        0
        1.1rem;

    font-size:
        clamp(
            1.6rem,
            2.6vw,
            2.65rem
        );

    line-height: 1.02;

    letter-spacing: -.035em;
}


.ap-tech-proof__item > p {
    max-width: 35rem;

    margin:
        0
        0
        1.7rem;

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

    line-height: 1.7;
}


/* ================================================================
   QUÉ SE REVISA
================================================================ */

.ap-tech-proof__checks {
    display: flex;

    flex-wrap: wrap;

    gap:
        .45rem
        .5rem;

    margin:
        0
        0
        2rem;
}


.ap-tech-proof__checks span {
    padding:
        .42rem
        .58rem;

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

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

    font-size: .59rem;

    letter-spacing: .07em;

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

    text-transform: uppercase;
}


/* ================================================================
   LINKS
================================================================ */

.ap-tech-proof__link {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.4rem;

    width: 100%;

    margin-top: auto;

    padding:
        1rem
        0;

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

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

    font-size: .69rem;
    font-weight: 700;

    letter-spacing: .065em;

    color:
        var(--color-text);

    text-transform: uppercase;

    transition:
        color
        220ms
        ease,
        border-color
        220ms
        ease;
}


.ap-tech-proof__link span {
    color:
        var(--color-accent-hover);

    transition:
        transform
        220ms
        ease;
}


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

    .ap-tech-proof__link:hover {
        color:
            var(--color-accent-hover);

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


    .ap-tech-proof__link:hover span {
        transform:
            translate(
                .18rem,
                -.18rem
            );
    }

}


/* ================================================================
   FOOT
================================================================ */

.ap-tech-proof__footer {
    display: grid;

    grid-template-columns:
        minmax(13rem, .42fr)
        minmax(0, 1fr);

    gap:
        clamp(
            1rem,
            4vw,
            4rem
        );

    padding-top:
        clamp(
            1.4rem,
            3vw,
            2.5rem
        );
}


.ap-tech-proof__footer strong {
    font-size: .85rem;

    line-height: 1.5;

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


.ap-tech-proof__footer p {
    max-width: 50rem;

    margin: 0;

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

    font-size: .75rem;

    line-height: 1.65;
}


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

@media (max-width: 900px) {

    .ap-tech-proof__header {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 1.4rem;
    }


    .ap-tech-proof__header p {
        max-width: 40rem;
    }

}


@media (max-width: 767px) {

    .ap-tech-proof::before {
        background-size:
            4rem
            4rem;
    }


    .ap-tech-proof__grid {
        grid-template-columns: 1fr;
    }


    .ap-tech-proof__item {
        min-height: 0;

        padding:
            1.65rem
            1.2rem;
    }


    .ap-tech-proof__source {
        margin-bottom: 2rem;
    }


    .ap-tech-proof__footer {
        grid-template-columns: 1fr;

        gap: .7rem;
    }

}


/* AP TECH VERIFICATION CSS END */


/* SOURCE: responsive.css */
/* AP Neural Web — Responsive Foundation V1 */

@media (max-width: 767px) {
    :root {
        --gutter: 1.1rem;
        --section-space: clamp(4.5rem, 16vw, 7rem);
    }

    .ap-button {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .ap-button {
        width: auto;
    }
}

@media (min-width: 1200px) {
    .ap-section-number {
        margin-bottom: 2rem;
    }
}


/* ================================================================
   AP NEURAL WEB — HEADER RESPONSIVE V2 / MOBILE UX POLISH
================================================================ */

@media (max-width: 1099px) {

    .site-header__inner {
        grid-template-columns: auto 1fr auto;

        min-height: 4.45rem;
    }

    .desktop-nav,
    .site-header__cta {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .site-header.is-compact .site-header__inner {
        min-height: 3.85rem;
        margin-top: .45rem;
        border-radius: 12px;
    }
}

@media (min-width: 1100px) {

    .mobile-menu,
    .menu-toggle {
        display: none !important;
    }
}

@media (max-width: 767px) {

    .site-header__inner {
        min-height: 4.15rem;
    }

    .site-header.is-compact .site-header__inner {
        min-height: 3.65rem;
        padding-inline: .65rem;
    }

    .site-brand__mark {
        width: 2.3rem;
        min-width: 2.3rem;
        flex-basis: 2.3rem;
    }

    .mobile-menu {
        padding-top: 4.6rem;
    }

    .mobile-menu__inner {
        width: min(91vw, 23rem);
        max-height: calc(100svh - 5.25rem);
    }
}

@media (max-width: 479px) {

    .site-brand__name {
        display: none;
    }

    .menu-toggle {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        padding: .32rem;
        border-radius: 50%;
    }

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

    .menu-toggle__icon {
        width: 100%;
        height: 100%;
    }

    .mobile-menu {
        padding:
            4.25rem
            .45rem
            .45rem;
    }

    .mobile-menu__inner {
        width: calc(100vw - .9rem);
        max-height: calc(100svh - 4.7rem);
        padding: .85rem .85rem .9rem;
        border-radius: 15px;
    }

    .mobile-nav__list a {
        min-height: 2.9rem;
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    }

    .mobile-nav__list strong {
        font-size: 1.02rem;
    }

    .mobile-menu__signature {
        margin-top: .7rem;
        padding-top: .7rem;
    }
}

@media (max-width: 359px) {

    .mobile-menu__inner {
        padding-inline: .72rem;
    }

    .mobile-nav__list a {
        min-height: 2.72rem;
    }

    .mobile-nav__list strong {
        font-size: .96rem;
    }
}



/* === AP MOBILE HARDENING V6 20260829 === */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        overscroll-behavior-x: none;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .site-main,
    main,
    section,
    article,
    .ap-container,
    .ap-grid {
        min-width: 0;
        max-width: 100%;
    }

    .ap-container {
        width: min(
            calc(100% - 2rem),
            var(--container)
        );
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }

    .site-main h1,
    .site-main h2,
    .site-main h3,
    .site-main h4,
    .site-main p,
    .site-main li,
    .mobile-menu {
        overflow-wrap: anywhere;
    }

    .ap-button,
    button,
    input,
    select,
    textarea {
        min-width: 0;
        max-width: 100%;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    pre,
    code {
        max-width: 100%;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }


    /* ============================================================
       CABECERA MÓVIL FIJA Y ESTABLE
    ============================================================ */

    .site-header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: auto !important;

        transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 9999 !important;

        pointer-events: none;
    }

    .site-header__inner,
    .site-header.is-compact .site-header__inner {
        width: 100% !important;
        max-width: none !important;

        min-height: 4rem !important;

        margin-top: 0 !important;
        margin-inline: 0 !important;

        padding-inline: 1rem !important;

        background:
            rgba(8, 9, 11, .97) !important;

        border-color:
            transparent
            transparent
            rgba(151, 154, 162, .17)
            transparent !important;

        border-radius: 0 !important;

        box-shadow:
            0 .55rem 1.55rem
            rgba(0, 0, 0, .20) !important;

        transition: none !important;

        transform: translateZ(0);
        pointer-events: auto;
    }

    .site-brand {
        min-width: 0;
    }

    .site-brand__mark {
        width: 2.3rem;
        min-width: 2.3rem;
        flex: 0 0 2.3rem;
    }

    .menu-toggle {
        flex: 0 0 auto;
    }


    /* ============================================================
       MENÚ MÓVIL
    ============================================================ */

    .mobile-menu {
        inset: 0 !important;

        width: 100% !important;
        height: 100dvh;
        max-height: 100dvh;

        padding:
            4.35rem
            .5rem
            .5rem !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-menu__inner {
        width: 100% !important;
        max-width: none !important;

        max-height:
            calc(100dvh - 4.85rem) !important;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav__list a {
        min-width: 0;
    }

    .mobile-nav__list strong,
    .mobile-nav__list span {
        min-width: 0;
    }


    /* ============================================================
       MODO MÓVIL LIGERO

       Los fondos siguen visibles pero se eliminan animaciones
       continuas costosas en teléfonos.
    ============================================================ */

    :is(
        .ap-story-map,
        .solutions-field,
        .solution-logo-field,
        .sector-logo-field,
        .projects-field,
        .company-field,
        .contact-field,
        .web-field,
        .systems-field,
        .saas-field,
        .automation-field,
        .maintenance-field,
        .legal-field
    ),
    :is(
        .ap-story-map,
        .solutions-field,
        .solution-logo-field,
        .sector-logo-field,
        .projects-field,
        .company-field,
        .contact-field,
        .web-field,
        .systems-field,
        .saas-field,
        .automation-field,
        .maintenance-field,
        .legal-field
    ) *,
    :is(
        .ap-story-map,
        .solutions-field,
        .solution-logo-field,
        .sector-logo-field,
        .projects-field,
        .company-field,
        .contact-field,
        .web-field,
        .systems-field,
        .saas-field,
        .automation-field,
        .maintenance-field,
        .legal-field
    )::before,
    :is(
        .ap-story-map,
        .solutions-field,
        .solution-logo-field,
        .sector-logo-field,
        .projects-field,
        .company-field,
        .contact-field,
        .web-field,
        .systems-field,
        .saas-field,
        .automation-field,
        .maintenance-field,
        .legal-field
    )::after,
    :is(
        .ap-story-map,
        .solutions-field,
        .solution-logo-field,
        .sector-logo-field,
        .projects-field,
        .company-field,
        .contact-field,
        .web-field,
        .systems-field,
        .saas-field,
        .automation-field,
        .maintenance-field,
        .legal-field
    ) *::before,
    :is(
        .ap-story-map,
        .solutions-field,
        .solution-logo-field,
        .sector-logo-field,
        .projects-field,
        .company-field,
        .contact-field,
        .web-field,
        .systems-field,
        .saas-field,
        .automation-field,
        .maintenance-field,
        .legal-field
    ) *::after {
        will-change: auto !important;
    }


    /* ============================================================
       SOLUCIONES — CORRECCIÓN DE DESBORDE MÓVIL
    ============================================================ */

    .page-solutions .solutions-main,
    .page-solutions .solution-section,
    .page-solutions .solutions-hero {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    .page-solutions .solutions-hero {
        min-height: auto;

        padding-top: 6rem;
        padding-bottom: 3.5rem;
    }

    .page-solutions .solutions-hero__grid {
        width: 100%;
        min-width: 0;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 2.25rem;
    }

    .page-solutions .solutions-hero__copy {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .page-solutions .solutions-hero__title {
        max-width: 100%;
    }


    /* Router */

    .page-solutions .decision-router {
        justify-self: center !important;

        width:
            min(100%, 22rem) !important;

        max-width: 100% !important;

        margin:
            1.25rem
            auto
            0 !important;

        transform: none !important;
    }

    .page-solutions .decision-router__input {
        left: 0 !important;
    }

    .page-solutions .decision-router__input::after {
        width: 3.25rem;
    }

    .page-solutions .decision-router__route {
        min-width: 6.45rem;
        max-width: 7.25rem;

        padding:
            .5rem
            .55rem;
    }

    .page-solutions
    .decision-router__route--web,

    .page-solutions
    .decision-router__route--system,

    .page-solutions
    .decision-router__route--automation,

    .page-solutions
    .decision-router__route--product {
        right: 0 !important;
    }

    .page-solutions
    .decision-router__route--evolution {
        right: 28% !important;
        bottom: 0 !important;
    }

    .page-solutions[data-solutions-mode="web"]
    [data-router-route="web"],

    .page-solutions[data-solutions-mode="system"]
    [data-router-route="system"],

    .page-solutions[data-solutions-mode="automation"]
    [data-router-route="automation"],

    .page-solutions[data-solutions-mode="product"]
    [data-router-route="product"],

    .page-solutions[data-solutions-mode="evolution"]
    [data-router-route="evolution"] {
        transform: none !important;
    }


    /* Fondo Soluciones menos pesado */

    .page-solutions .solutions-field__svg {
        width: 135% !important;
        max-width: none !important;

        left: -17.5% !important;
    }

    .page-solutions .solution-orbit,
    .page-solutions .solutions-field__refraction,
    .page-solutions .solution-logo-field__glint {
        display: none !important;
    }

    .page-solutions .solutions-field__grid,
    .page-solutions .solutions-field__weave {
        will-change: auto !important;
    }


    /* Tarjetas Soluciones */

    .page-solutions .solution-signal-grid,
    .page-solutions .solution-routes,
    .page-solutions .criteria-list,
    .page-solutions .result-statements {
        min-width: 0;
        max-width: 100%;
    }

    .page-solutions .solution-signal,
    .page-solutions .solution-route,
    .page-solutions .criteria-list article,
    .page-solutions .buildable-rail li,
    .page-solutions .result-statements p,
    .page-solutions .response-stage,
    .page-solutions .solution-cta {
        min-width: 0;
        max-width: 100%;

        filter: none !important;
        will-change: auto !important;
    }

    .page-solutions .solution-route {
        width: 100%;
    }

    .page-solutions .solution-route__body {
        min-width: 0;
    }

    .page-solutions .solution-route__body h3,
    .page-solutions .solution-route__body p,
    .page-solutions .solution-route__body span {
        max-width: 100%;
    }

    .page-solutions .response-stage {
        width: 100%;
    }

    .page-solutions .response-stage__body > * {
        min-width: 0;
        max-width: 100%;
    }


    /* ============================================================
       INTERACCIÓN TÁCTIL
    ============================================================ */

    @media (pointer: coarse) {

        a,
        button,
        .menu-toggle {
            touch-action: manipulation;
        }

        .ap-button,
        .mobile-nav__list a {
            -webkit-tap-highlight-color:
                rgba(181, 32, 74, .15);
        }
    }
}


@media (max-width: 479px) {

    .ap-container {
        width:
            min(
                calc(100% - 1.5rem),
                var(--container)
            );
    }

    .site-header__inner,
    .site-header.is-compact .site-header__inner {
        min-height: 3.9rem !important;

        padding-inline:
            .75rem !important;
    }

    .mobile-menu {
        padding-top:
            4.2rem !important;
    }

    .page-solutions .decision-router {
        width:
            min(100%, 20.5rem) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

    .page-solutions .decision-router__route {
        min-width: 5.9rem;
        max-width: 6.6rem;
    }

    .page-solutions
    .decision-router__route strong {
        font-size: .54rem;
        letter-spacing: .055em;
    }
}


@media (max-width: 359px) {

    .ap-container {
        width:
            calc(100% - 1.2rem);
    }

    .site-header__inner,
    .site-header.is-compact .site-header__inner {
        padding-inline:
            .6rem !important;
    }

    .page-solutions .decision-router {
        width: 100% !important;
        transform: none !important;
    }

    .page-solutions .decision-router__route {
        min-width: 5.4rem;
        max-width: 6rem;

        padding:
            .45rem
            .45rem;
    }
}

/* === AP MOBILE BALANCED EFFECTS V7 20260829 === */


/* ================================================================
   MÓVIL
   Mantiene efectos visuales pero evita motion pesado por scroll
================================================================ */

@media (max-width: 767px) {


    /* ============================================================
       REVEAL / ENTRADAS

       IntersectionObserver continúa funcionando.
       Son animaciones de una sola ejecución, no por cada scroll.
    ============================================================ */

    .js.ap-reveal-ready [data-ap-reveal] {
        transition:
            opacity 520ms var(--ease-ap),
            transform 520ms var(--ease-ap);
    }


    /* ============================================================
       MENÚ — FONDO GENERAL

       El overlay ocupa pantalla porque debe bloquear el contenido,
       PERO la ventana visual será mucho más pequeña.
    ============================================================ */

    .mobile-menu {
        padding:
            4.35rem
            .75rem
            .75rem !important;

        background:
            rgba(8, 9, 11, .36) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* ============================================================
       VENTANA DEL MENÚ

       Antes podía ocupar casi todo el teléfono.
       Ahora queda como panel flotante compacto.
    ============================================================ */

    .mobile-menu__inner {
        width:
            min(
                84vw,
                20rem
            ) !important;

        max-width:
            20rem !important;

        max-height:
            min(
                72dvh,
                31rem
            ) !important;

        padding:
            .78rem
            .8rem
            .82rem !important;

        border-radius:
            14px !important;

        opacity: 0;

        transform:
            translate3d(
                .8rem,
                -.18rem,
                0
            )
            scale(.965);

        transform-origin:
            top right;

        transition:
            opacity
            220ms
            var(--ease-ap),

            transform
            340ms
            var(--ease-ap),

            border-color
            240ms
            var(--ease-ap),

            box-shadow
            240ms
            var(--ease-ap)
            !important;
    }


    /* ============================================================
       ENTRADA DEL PANEL
    ============================================================ */

    .mobile-menu.is-open
    .mobile-menu__inner {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }


    /* ============================================================
       CABECERA INTERNA DEL MENÚ
    ============================================================ */

    .mobile-menu__meta {
        min-height:
            1.7rem;

        padding:
            0
            .05rem
            .5rem;

        font-size:
            .54rem;
    }


    /* ============================================================
       NAVEGACIÓN MÁS COMPACTA
    ============================================================ */

    .mobile-nav {
        margin-top:
            .35rem;
    }


    /* ============================================================
       ANIMACIÓN DE CADA OPCIÓN

       Se mueve únicamente al abrir/cerrar.
       No consume recursos continuamente.
    ============================================================ */

    .mobile-nav__list li {
        opacity: 0;

        transform:
            translate3d(
                .55rem,
                0,
                0
            )
            scale(.99);

        transition:
            opacity
            220ms
            var(--ease-ap),

            transform
            300ms
            var(--ease-ap),

            border-color
            200ms
            ease;
    }


    .mobile-menu.is-open
    .mobile-nav__list li {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }


    /* ============================================================
       OPCIONES MENÚ MÁS BAJAS
    ============================================================ */

    .mobile-nav__list a {
        min-height:
            2.68rem !important;

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

        gap:
            .22rem;

        padding-inline:
            .08rem
            .12rem;
    }


    .mobile-nav__list strong {
        font-size:
            clamp(
                .94rem,
                4vw,
                1.06rem
            );

        line-height:
            1.08;
    }


    /* ============================================================
       BOTÓN DEL MENÚ / CTA
    ============================================================ */

    .mobile-menu__action {
        display:
            flex;

        margin-top:
            .58rem;
    }


    .mobile-menu__action
    .ap-button {
        width:
            fit-content !important;

        max-width:
            100%;

        min-height:
            2.58rem;

        padding:
            .58rem
            .72rem;

        gap:
            .58rem;

        font-size:
            .62rem;

        line-height:
            1.15;

        white-space:
            normal;

        text-align:
            center;
    }


    /* ============================================================
       FIRMA INFERIOR MÁS COMPACTA
    ============================================================ */

    .mobile-menu__signature {
        margin-top:
            .58rem;

        padding-top:
            .58rem;

        gap:
            .55rem;

        font-size:
            .51rem;
    }


    /* ============================================================
       BOTÓN HAMBURGUESA

       Efecto al abrir/cerrar.
    ============================================================ */

    .menu-toggle {
        transform:
            translateZ(0);
    }


    .menu-toggle[aria-expanded="true"] {
        transform:
            scale(.97);

        box-shadow:
            inset
            0
            1px
            0
            rgba(243,243,241,.05),

            0
            .6rem
            1.6rem
            rgba(0,0,0,.22),

            0
            0
            0
            1px
            rgba(181,32,74,.10);
    }


    /* ============================================================
       EL CÍRCULO DEL MENÚ ROTA Y SE CONVIERTE EN CERRAR
    ============================================================ */

    .menu-toggle[aria-expanded="true"]
    .menu-toggle__icon {
        transform:
            rotate(135deg)
            scale(.94);
    }


    .menu-toggle:active {
        transform:
            scale(.955);
    }


    /* ============================================================
       BOTONES GENERALES

       Antes responsive.css tenía:
           width: 100%

       Ahora el botón utiliza solamente el espacio necesario.
    ============================================================ */

    .site-main
    .ap-button {
        width:
            fit-content !important;

        max-width:
            100%;

        min-height:
            2.72rem;

        padding:
            .62rem
            .82rem;

        gap:
            .68rem;

        justify-content:
            center;

        white-space:
            normal;

        text-align:
            center;

        line-height:
            1.16;
    }


    /* Flecha nunca aplasta el texto */

    .site-main
    .ap-button::after {
        flex:
            0
            0
            auto;
    }


    /* ============================================================
       MICRO EFECTO AL TOCAR BOTONES
    ============================================================ */

    .site-main
    .ap-button:active {
        transform:
            translateY(1px)
            scale(.975);
    }


    .site-main
    .ap-button:active::after {
        transform:
            translateX(.24rem);
    }


    /* ============================================================
       SOLUCIONES

       Recuperamos el pequeño brillo.
       NO recuperamos las órbitas grandes que son más pesadas.
    ============================================================ */

    .solution-logo-field__glint {
        display:
            block !important;
    }


}


/* ================================================================
   TELÉFONOS PEQUEÑOS
================================================================ */

@media (max-width: 479px) {

    .mobile-menu {
        padding:
            4.2rem
            .8rem
            .7rem !important;
    }


    .mobile-menu__inner {
        width:
            min(
                calc(100vw - 1.6rem),
                19rem
            ) !important;

        max-width:
            19rem !important;

        max-height:
            min(
                74dvh,
                30rem
            ) !important;

        padding:
            .72rem
            .74rem
            .76rem !important;
    }


    .mobile-nav__list a {
        min-height:
            2.58rem !important;

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


    .mobile-nav__list strong {
        font-size:
            .96rem;
    }


    .site-main
    .ap-button {
        max-width:
            min(
                100%,
                20rem
            );

        padding:
            .6rem
            .76rem;

        font-size:
            .64rem;
    }

}


/* ================================================================
   320–359 PX
================================================================ */

@media (max-width: 359px) {

    .mobile-menu__inner {
        width:
            calc(
                100vw - 1.2rem
            ) !important;

        max-width:
            none !important;

        max-height:
            76dvh !important;
    }


    .mobile-nav__list a {
        min-height:
            2.5rem !important;
    }


    .site-main
    .ap-button {
        max-width:
            100%;
    }

}


/* === AP MOBILE INTERACTION V8 20260829 === */

@property --ap-menu-trace-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}


@keyframes apMenuBorderTraceV8 {

    to {
        --ap-menu-trace-angle: 360deg;
    }

}


@keyframes apMenuTapRightV8 {

    0% {
        transform:
            translateX(0)
            scale(1);

        opacity: 1;
    }

    52% {
        transform:
            translateX(.8rem)
            scale(.985);
    }

    100% {
        transform:
            translateX(1.5rem)
            scale(.975);

        opacity: .15;
    }

}


@keyframes apMenuTapLeftV8 {

    0% {
        transform:
            translateX(0)
            scale(1);

        opacity: 1;
    }

    52% {
        transform:
            translateX(-.8rem)
            scale(.985);
    }

    100% {
        transform:
            translateX(-1.5rem)
            scale(.975);

        opacity: .15;
    }

}


@keyframes apMenuArrowRightV8 {

    0% {
        opacity: 0;

        transform:
            translateX(-.4rem);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translateX(.8rem);
    }

}


@keyframes apMenuArrowLeftV8 {

    0% {
        opacity: 0;

        transform:
            translateX(.4rem);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translateX(-.8rem);
    }

}


@media (max-width: 767px) {

    /* ============================================================
       VENTANA DEL MENÚ
    ============================================================ */

    .mobile-menu__inner {

        position: relative;

        isolation: isolate;

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


    /* ============================================================
       LÍNEA ROJA QUE RECORRE EL CONTORNO
    ============================================================ */

    .mobile-menu__inner::before {

        content: "" !important;

        position:
            absolute !important;

        inset:
            0 !important;

        z-index:
            6 !important;

        width:
            auto !important;

        height:
            auto !important;

        padding:
            1px;

        border-radius:
            inherit;

        box-sizing:
            border-box;

        pointer-events:
            none;

        opacity:
            1 !important;

        background:

            conic-gradient(

                from
                var(--ap-menu-trace-angle),

                transparent
                0deg
                274deg,

                rgba(181,32,74,.12)
                292deg,

                #8B1538
                308deg,

                #B5204A
                322deg,

                #F3F3F1
                330deg,

                #B5204A
                339deg,

                transparent
                360deg

            ) !important;

        -webkit-mask:

            linear-gradient(
                #000 0 0
            )
            content-box,

            linear-gradient(
                #000 0 0
            );

        -webkit-mask-composite:
            xor;

        mask-composite:
            exclude;

        animation:

            apMenuBorderTraceV8
            3.2s
            linear
            infinite;
    }


    /* ============================================================
       PESTAÑAS ENTRANDO INTERCALADAS

       01 izquierda
       02 derecha
       03 izquierda
       04 derecha
       ...
    ============================================================ */

    .mobile-nav__list
    li:nth-child(odd) {

        transform:

            translate3d(
                -.6rem,
                0,
                0
            )

            scale(.99)
            !important;

        transform-origin:
            left center;
    }


    .mobile-nav__list
    li:nth-child(even) {

        transform:

            translate3d(
                .6rem,
                0,
                0
            )

            scale(.99)
            !important;

        transform-origin:
            right center;
    }


    .mobile-menu.is-open
    .mobile-nav__list li {

        transform:

            translate3d(
                0,
                0,
                0
            )

            scale(1)
            !important;
    }


    /* ============================================================
       CUANDO SE TOCA UNA PESTAÑA
    ============================================================ */

    .mobile-menu.is-navigating
    .mobile-nav__list
    li:not(.is-menu-leaving-right)
    :not(.is-menu-leaving-left) {

        opacity:
            .38;

        transition-delay:
            0ms !important;
    }


    .mobile-nav__list
    li.is-menu-leaving-right,

    .mobile-nav__list
    li.is-menu-leaving-left {

        transition-delay:
            0ms !important;
    }


    /* 02 SOLUCIONES, 04 DIAGNÓSTICO, 06 EMPRESA */

    .mobile-nav__list
    li.is-menu-leaving-right > a {

        animation:

            apMenuTapRightV8
            260ms
            cubic-bezier(.22,1,.36,1)
            both;

        background:

            linear-gradient(
                90deg,
                rgba(181,32,74,.04),
                rgba(181,32,74,.16)
            );
    }


    /* 01 INICIO, 03 SECTORES, 05 PROYECTOS, 07 CONTACTO */

    .mobile-nav__list
    li.is-menu-leaving-left > a {

        animation:

            apMenuTapLeftV8
            260ms
            cubic-bezier(.22,1,.36,1)
            both;

        background:

            linear-gradient(
                270deg,
                rgba(181,32,74,.04),
                rgba(181,32,74,.16)
            );
    }


    .mobile-nav__list
    li.is-menu-leaving-right
    > a::before,

    .mobile-nav__list
    li.is-menu-leaving-left
    > a::before {

        height:
            1.25rem !important;

        box-shadow:

            0 0 .85rem
            rgba(181,32,74,.34);
    }


    /* Flecha derecha */

    .mobile-nav__list
    li.is-menu-leaving-right
    > a::after {

        content:
            "→" !important;

        opacity:
            1 !important;

        animation:

            apMenuArrowRightV8
            260ms
            ease-out
            both;
    }


    /* Flecha izquierda */

    .mobile-nav__list
    li.is-menu-leaving-left
    > a::after {

        content:
            "←" !important;

        opacity:
            1 !important;

        animation:

            apMenuArrowLeftV8
            260ms
            ease-out
            both;
    }

}


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

    .mobile-menu__inner::before {

        animation:
            none !important;

        background:
            transparent !important;
    }

}

/* === AP MOBILE PERFORMANCE SERVICES V9 20260830 === */


@media (max-width: 767px) {


    /* ============================================================
       SAAS
       SVG visible igual, pero versión móvil sin movimiento interno.
    ============================================================ */

    .page-service-saas
    .saas-field__picture {

        display:
            contents;
    }


    .page-service-saas
    .saas-field__art,

    .page-service-saas
    .saas-field::before {

        animation:
            none !important;

        will-change:
            auto !important;
    }


    .page-service-saas
    .saas-field__art {

        filter:
            none !important;
    }


    /* ============================================================
       MANTENIMIENTO
       Conserva la red original.
       Detiene los filtros sobre las 100+ formas.
    ============================================================ */

    .page-service-maintenance
    .maintenance-field__inline,

    .page-service-maintenance
    .maintenance-network__path,

    .page-service-maintenance
    .maintenance-network__energy,

    .page-service-maintenance
    .maintenance-field::before {

        animation:
            none !important;

        will-change:
            auto !important;
    }


    .page-service-maintenance
    .maintenance-network__path--medium,

    .page-service-maintenance
    .maintenance-network__path--signal,

    .page-service-maintenance
    .maintenance-network__path--hot,

    .page-service-maintenance
    .maintenance-network__energy {

        filter:
            none !important;
    }


    /*
    La red base sigue visible.
    Solo desaparecen los recorridos energéticos
    que constantemente se estaban recalculando.
    */

    .page-service-maintenance
    .maintenance-network__energy-layer {

        display:
            none !important;
    }


    /* ============================================================
       PANELES CON BLUR
       Se reemplaza blur por fondo sólido semitransparente.
    ============================================================ */

    .page-service-saas
    .saas-release,

    .page-service-saas
    .saas-service-nav,

    .page-service-maintenance
    .maintenance-status,

    .page-service-maintenance
    .maintenance-service-nav {

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }


    .page-service-saas
    .saas-release,

    .page-service-maintenance
    .maintenance-status {

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


    .page-service-saas
    .saas-service-nav,

    .page-service-maintenance
    .maintenance-service-nav {

        background:
            rgba(
                8,
                9,
                11,
                .96
            )
            !important;
    }


    /* ============================================================
       ANIMACIONES CONTINUAS SECUNDARIAS

       Se congelan solamente las que nunca paran.
       Los cambios cuando el usuario toca una opción siguen activos.
    ============================================================ */

    .page-service-saas
    .saas-release__scan,

    .page-service-saas
    .saas-release__progress i,

    .page-service-saas
    .saas-stack__version i::after,

    .page-service-maintenance
    .maintenance-status__signal i,

    .page-service-maintenance
    .maintenance-map__status i::after {

        animation:
            none !important;
    }


    /* ============================================================
       MENÚ

       Esta es una de las mejoras más importantes.

       Cuando abres el menú:
       el fondo tecnológico deja de pintarse temporalmente.

       Al cerrar:
       reaparece inmediatamente.
    ============================================================ */

    body.page-service-saas.menu-open
    .saas-field,

    body.page-service-maintenance.menu-open
    .maintenance-field {

        visibility:
            hidden !important;
    }


    /*
    No hacemos blur de toda la pantalla detrás del menú.
    El panel conserva su diseño y animaciones.
    */

    body.page-service-saas
    .mobile-menu,

    body.page-service-maintenance
    .mobile-menu {

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        background:

            rgba(
                8,
                9,
                11,
                .72
            )
            !important;
    }


    /* ============================================================
       AISLAMIENTO DE RENDERIZADO
    ============================================================ */

    .page-service-saas
    .saas-field,

    .page-service-maintenance
    .maintenance-field {

        contain:
            paint;
    }

}

/* === AP MOBILE SERVICE DETAILS V10 20260830 === */


/* ================================================================
   ANIMACIONES LIGERAS
   Solo se ejecutan una vez al entrar al viewport.
================================================================ */

@keyframes apMobileCardBorderV10 {

    0% {
        border-color:
            rgba(151,154,162,.11);

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

    42% {
        border-color:
            rgba(181,32,74,.30);

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

    100% {
        border-color:
            rgba(151,154,162,.15);

        background:
            rgba(12,13,16,.72);
    }

}


@keyframes apMobileSaasShelfV10 {

    0% {
        transform:
            translateX(-120%);

        opacity:
            0;
    }

    55% {
        transform:
            translateX(0);

        opacity:
            .92;
    }

    100% {
        transform:
            translateX(0);

        opacity:
            .34;
    }

}


@keyframes apMobileMaintenanceLineV10 {

    0% {
        transform:
            scaleX(.14);

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

    55% {
        transform:
            scaleX(1);

        background:
            #B5204A;
    }

    100% {
        transform:
            scaleX(.38);

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

}


@keyframes apMobileListLineV10 {

    0% {
        width:
            0;
    }

    58% {
        width:
            44%;
    }

    100% {
        width:
            18%;
    }

}


/* ================================================================
   BOTONES SAAS
================================================================ */

@keyframes apSaasButtonReleaseBarV10 {

    0% {
        opacity:
            0;
    }

    20%,
    78% {
        opacity:
            .9;
    }

    100% {
        opacity:
            .30;
    }

}


@keyframes apSaasButtonReleaseMoveV10 {

    0% {
        left:
            -35%;
    }

    100% {
        left:
            103%;
    }

}


@keyframes apSaasButtonTrackV10 {

    0% {
        clip-path:
            inset(0 100% 0 0);

        border-color:
            transparent;
    }

    70% {
        clip-path:
            inset(0 0 0 0);

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

    100% {
        clip-path:
            inset(0 0 0 0);

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

}


/* ================================================================
   BOTONES MANTENIMIENTO
================================================================ */

@keyframes apMaintenanceButtonCheckV10 {

    0% {
        opacity:
            0;
    }

    18%,
    78% {
        opacity:
            1;
    }

    100% {
        opacity:
            .26;
    }

}


@keyframes apMaintenanceButtonCheckMoveV10 {

    0% {
        left:
            -18%;
    }

    100% {
        left:
            103%;
    }

}


@keyframes apMaintenanceButtonLineV10 {

    0% {
        width:
            0;
    }

    62% {
        width:
            calc(100% - 1.4rem);
    }

    100% {
        width:
            32%;
    }

}


/* ================================================================
   LOGO MANTENIMIENTO
================================================================ */

@keyframes apMaintenanceLogoOuterV10 {

    0% {
        transform:
            translate(-50%,-50%)
            rotate(45deg);
    }

    58% {
        transform:
            translate(-50%,-50%)
            rotate(135deg);

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

    100% {
        transform:
            translate(-50%,-50%)
            rotate(135deg);

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

}


@keyframes apMaintenanceLogoInnerV10 {

    0% {
        transform:
            translate(-50%,-50%)
            rotate(45deg);

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

    58% {
        transform:
            translate(-50%,-50%)
            rotate(-45deg);

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

    100% {
        transform:
            translate(-50%,-50%)
            rotate(-45deg);

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

}


@keyframes apMaintenanceLogoArtV10 {

    0% {
        transform:
            scale(1);

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

    55% {
        transform:
            scale(1.075);

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

    100% {
        transform:
            scale(1.025);

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

}


/* ================================================================
   MÓVIL
================================================================ */

@media
(max-width: 767px)
and
(prefers-reduced-motion: no-preference) {


    /* ============================================================
       SAAS — TARJETAS

       El propio reveal ya usa IntersectionObserver.
       No añadimos ningún listener de scroll.
    ============================================================ */

    .page-service-saas
    .saas-part[data-ap-reveal].is-visible {

        animation:
            apMobileCardBorderV10
            820ms
            cubic-bezier(.22,1,.36,1)
            180ms
            1
            both;
    }


    .page-service-saas
    .saas-part.is-visible
    .saas-part__shelves i {

        animation:
            apMobileSaasShelfV10
            850ms
            cubic-bezier(.22,1,.36,1)
            360ms
            1
            both;
    }


    .page-service-saas
    .saas-part.is-visible
    .saas-part__shelves i:nth-child(2) {

        animation-delay:
            430ms;
    }


    .page-service-saas
    .saas-part.is-visible
    .saas-part__shelves i:nth-child(3) {

        animation-delay:
            500ms;
    }


    /* Al tocar tarjeta */

    .page-service-saas
    .saas-part:active {

        transform:
            translateY(-3px);

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

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


    .page-service-saas
    .saas-part:active
    .saas-part__shelves i {

        transform:
            translateX(0);

        opacity:
            .9;
    }


    /* ============================================================
       SAAS — LÍNEAS DE DECISIÓN
    ============================================================ */

    .page-service-saas
    .saas-decision__list
    article.is-visible > i {

        animation:
            apMobileListLineV10
            760ms
            cubic-bezier(.22,1,.36,1)
            320ms
            1
            both;
    }


    .page-service-saas
    .saas-decision__list
    article:active {

        padding-left:
            1rem;

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


    .page-service-saas
    .saas-decision__list
    article:active > i {

        width:
            44%;
    }


    /* ============================================================
       SAAS — EFECTOS DE BOTONES
    ============================================================ */

    .page-service-saas
    [data-ap-reveal].is-visible
    .saas-button--release > i {

        animation:
            apSaasButtonReleaseBarV10
            760ms
            ease
            420ms
            1
            both;
    }


    .page-service-saas
    [data-ap-reveal].is-visible
    .saas-button--release > i::after {

        animation:
            apSaasButtonReleaseMoveV10
            680ms
            cubic-bezier(.22,1,.36,1)
            470ms
            1
            both;
    }


    .page-service-saas
    [data-ap-reveal].is-visible
    .saas-button--track > i {

        animation:
            apSaasButtonTrackV10
            720ms
            cubic-bezier(.22,1,.36,1)
            500ms
            1
            both;
    }


    .page-service-saas
    .saas-button--release:active > i {

        opacity:
            1;
    }


    .page-service-saas
    .saas-button--release:active > i::after {

        left:
            103%;
    }


    .page-service-saas
    .saas-button--track:active > i {

        clip-path:
            inset(0 0 0 0);

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


    /* ============================================================
       MANTENIMIENTO — TARJETAS
    ============================================================ */

    .page-service-maintenance
    .maintenance-work-card[data-ap-reveal].is-visible {

        animation:
            apMobileCardBorderV10
            820ms
            cubic-bezier(.22,1,.36,1)
            180ms
            1
            both;
    }


    .page-service-maintenance
    .maintenance-work-card.is-visible
    .maintenance-work-card__state i {

        animation:
            apMobileMaintenanceLineV10
            850ms
            cubic-bezier(.22,1,.36,1)
            340ms
            1
            both;
    }


    .page-service-maintenance
    .maintenance-work-card:active {

        transform:
            translateY(-3px);

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

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


    .page-service-maintenance
    .maintenance-work-card:active
    .maintenance-work-card__state i {

        transform:
            scaleX(1);

        background:
            #B5204A;
    }


    /* ============================================================
       MANTENIMIENTO — LÍNEAS DE COBERTURA
    ============================================================ */

    .page-service-maintenance
    .maintenance-coverage__list
    article.is-visible > i {

        animation:
            apMobileListLineV10
            760ms
            cubic-bezier(.22,1,.36,1)
            320ms
            1
            both;
    }


    .page-service-maintenance
    .maintenance-coverage__list
    article:active {

        padding-left:
            1rem;

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


    .page-service-maintenance
    .maintenance-coverage__list
    article:active > i {

        width:
            40%;
    }


    /* ============================================================
       MANTENIMIENTO — BOTONES
    ============================================================ */

    .page-service-maintenance
    [data-ap-reveal].is-visible
    .maintenance-button--check > i {

        animation:
            apMaintenanceButtonCheckV10
            760ms
            ease
            420ms
            1
            both;
    }


    .page-service-maintenance
    [data-ap-reveal].is-visible
    .maintenance-button--check > i::after {

        animation:
            apMaintenanceButtonCheckMoveV10
            650ms
            cubic-bezier(.22,1,.36,1)
            470ms
            1
            both;
    }


    .page-service-maintenance
    [data-ap-reveal].is-visible
    .maintenance-button--line > i {

        animation:
            apMaintenanceButtonLineV10
            700ms
            cubic-bezier(.22,1,.36,1)
            500ms
            1
            both;
    }


    .page-service-maintenance
    .maintenance-button--check:active > i {

        opacity:
            1;
    }


    .page-service-maintenance
    .maintenance-button--check:active > i::after {

        left:
            103%;
    }


    .page-service-maintenance
    .maintenance-button--line:active > i {

        width:
            calc(100% - 1.4rem);
    }


    /* ============================================================
       LOGO MANTENIMIENTO

       Replica el lenguaje del hover de PC una sola vez.
    ============================================================ */

    .page-service-maintenance
    .maintenance-brandflow__center.is-visible
    .maintenance-brandflow__diamond--outer {

        animation:
            apMaintenanceLogoOuterV10
            980ms
            cubic-bezier(.22,1,.36,1)
            280ms
            1
            both;
    }


    .page-service-maintenance
    .maintenance-brandflow__center.is-visible
    .maintenance-brandflow__diamond--inner {

        animation:
            apMaintenanceLogoInnerV10
            980ms
            cubic-bezier(.22,1,.36,1)
            340ms
            1
            both;
    }


    .page-service-maintenance
    .maintenance-brandflow__center.is-visible
    .maintenance-brandflow__logo-art {

        animation:
            apMaintenanceLogoArtV10
            900ms
            cubic-bezier(.22,1,.36,1)
            410ms
            1
            both;
    }


    /* Al tocar el logo conserva feedback tipo PC */

    .page-service-maintenance
    .maintenance-brandflow__logo:active
    .maintenance-brandflow__diamond--outer {

        transform:
            translate(-50%,-50%)
            rotate(135deg);
    }


    .page-service-maintenance
    .maintenance-brandflow__logo:active
    .maintenance-brandflow__diamond--inner {

        transform:
            translate(-50%,-50%)
            rotate(-45deg);

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


    .page-service-maintenance
    .maintenance-brandflow__logo:active
    .maintenance-brandflow__logo-art {

        transform:
            scale(1.075);
    }

}


/* ================================================================
   BOTONES MÓVILES GENERALES

   No cambia estructura de la página.
   Solo corrige:
   texto + espacio + flecha.
================================================================ */

@media (max-width: 767px) {

    .ap-button {

        column-gap:
            .72rem !important;

        padding-left:
            .88rem;

        padding-right:
            .88rem;

        line-height:
            1.22;
    }


    /*
    Si el botón tiene <span>,
    el texto ocupa solamente el espacio disponible.
    */

    .ap-button > span {

        width:
            auto !important;

        min-width:
            0;

        flex:
            1 1 auto;

        white-space:
            normal !important;

        word-break:
            normal;

        overflow-wrap:
            normal;

        hyphens:
            none;

        text-wrap:
            balance;

        line-height:
            1.22;
    }


    /*
    Flecha independiente.
    Nunca se pega a la última palabra.
    Nunca se comprime.
    */

    .ap-button::after {

        flex:
            0 0 auto;

        min-width:
            1rem;

        margin-left:
            .28rem;

        text-align:
            center;

        line-height:
            1;
    }


    /* ============================================================
       SOLO SAAS Y MANTENIMIENTO:
       evitar botones excesivamente largos.
    ============================================================ */

    .page-service-saas
    .saas-hero__actions .ap-button,

    .page-service-saas
    .saas-cta__actions .ap-button,

    .page-service-maintenance
    .maintenance-hero__actions .ap-button,

    .page-service-maintenance
    .maintenance-cta__actions .ap-button {

        width:
            fit-content !important;

        max-width:
            min(
                100%,
                22rem
            );

        min-width:
            min(
                100%,
                12rem
            );

        justify-self:
            start;

        justify-content:
            center;
    }

}


/* ================================================================
   TELÉFONOS MUY PEQUEÑOS
================================================================ */

@media (max-width: 399px) {

    .ap-button {

        column-gap:
            .55rem !important;

        padding-left:
            .72rem;

        padding-right:
            .72rem;

        font-size:
            clamp(
                .64rem,
                3vw,
                .75rem
            );
    }


    .ap-button::after {

        margin-left:
            .18rem;
    }


    .page-service-saas
    .saas-hero__actions .ap-button,

    .page-service-saas
    .saas-cta__actions .ap-button,

    .page-service-maintenance
    .maintenance-hero__actions .ap-button,

    .page-service-maintenance
    .maintenance-cta__actions .ap-button {

        min-width:
            0;

        max-width:
            100%;
    }

}


/* AP MOBILE MENU FINAL WITHOUT NUMBERS START */

@media (max-width: 767px) {

    /*
     * Ya no existen 01, 02, 03...
     *
     * Por lo tanto abandonamos por completo
     * la cuadrícula de tres columnas:
     *
     * número | texto | flecha
     *
     * y usamos:
     *
     * texto | flecha
     */

    .mobile-menu
    .mobile-nav__list > li > a {

        display: flex !important;

        grid-template-columns: none !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: .6rem !important;
    }


    /*
     * El nombre dispone ahora de todo el ancho.
     *
     * También anulamos cualquier regla global
     * que pudiera partir palabras.
     */

    .mobile-menu
    .mobile-nav__list > li > a > strong {

        display: block !important;

        flex:
            1
            1
            auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        grid-column: auto !important;

        white-space: nowrap !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /*
     * Flecha original.
     * Sigue funcionando con hover/focus.
     */

    .mobile-menu
    .mobile-nav__list > li > a::after {

        flex:
            0
            0
            auto !important;

        grid-column: auto !important;

        margin-left: auto !important;

        justify-self: auto !important;
    }


    /*
     * AP / MENU queda solo a la izquierda.
     */

    .mobile-menu
    .mobile-menu__meta {

        justify-content:
            flex-start !important;
    }


    /*
     * Antes :last-child era el círculo "01".
     *
     * Ahora el único span es AP / MENU,
     * por eso anulamos totalmente aquel diseño.
     */

    .mobile-menu
    .mobile-menu__meta > span:last-child {

        display:
            inline-block !important;

        width:
            auto !important;

        min-width:
            0 !important;

        height:
            auto !important;

        aspect-ratio:
            auto !important;

        padding:
            0 !important;

        color:
            inherit !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            none !important;

        box-shadow:
            none !important;

        place-items:
            initial !important;
    }


    /*
     * El <ol> no debe generar numeración propia.
     */

    .mobile-menu
    .mobile-nav__list {

        list-style:
            none !important;

        padding-left:
            0 !important;
    }

}


/*
 * Los teléfonos más pequeños conservan
 * exactamente la misma estructura.
 */

@media (max-width: 479px) {

    .mobile-menu
    .mobile-nav__list > li > a {

        display:
            flex !important;

        grid-template-columns:
            none !important;
    }


    .mobile-menu
    .mobile-nav__list > li > a > strong {

        white-space:
            nowrap !important;
    }

}

/* AP MOBILE MENU FINAL WITHOUT NUMBERS END */


/* AP MOBILE SOCIAL HEADER CLEARANCE START */


/* ================================================================
   CABECERA SOCIAL — ESPACIO REAL EN LAS PRIMERAS CUATRO PÁGINAS

   La cabecera móvil fija + la fila social ocupan más altura que
   antes. Únicamente estos cuatro heroes tenían un padding superior
   menor que el resto del sitio.
================================================================ */

@media (max-width: 1099px) {

    .page-home .home-hero,
    .page-solutions .solutions-hero,
    .page-sectors .sectors-hero,
    .page-diagnostic .diagnostic-hero {

        /*
         * 4rem aprox. de header
         * + fila social
         * + espacio visual de respiración.
         */

        padding-top:
            clamp(
                8.55rem,
                16vw,
                9.25rem
            ) !important;
    }


    /*
     * Evita que títulos o elementos gráficos
     * puedan entrar debajo de la barra fija.
     */

    .page-home .home-hero__grid,
    .page-solutions .solutions-hero__grid,
    .page-sectors .sectors-hero__grid,
    .page-diagnostic .diagnostic-hero__grid {

        position: relative;

        z-index: 1;
    }

}


/* Teléfonos estrechos */

@media (max-width: 479px) {

    .page-home .home-hero,
    .page-solutions .solutions-hero,
    .page-sectors .sectors-hero,
    .page-diagnostic .diagnostic-hero {

        padding-top:
            8.25rem !important;
    }

}


/*
 * Cuando el menú se abre la barra social se recoge,
 * pero NO reducimos el padding del hero.
 *
 * Así el contenido no salta hacia arriba/abajo.
 */


/* AP MOBILE SOCIAL HEADER CLEARANCE END */