/* AP Neural Web — Blog V1 / editorial knowledge system */

.page-blog {
    position: relative;
    min-height: 100%;
    overflow-x: clip;
    background: #08090B;
}

.page-blog .site-main,
.page-blog .site-footer {
    position: relative;
    z-index: 2;
}

/* ================================================================
   BACKGROUND / KNOWLEDGE SYSTEM
================================================================ */

.blog-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: paint;
    background:
        radial-gradient(circle at 82% 9%, rgba(181,32,74,.085), transparent 24rem),
        radial-gradient(circle at 14% 40%, rgba(139,21,56,.045), transparent 30rem),
        linear-gradient(180deg, #08090B 0%, #090A0C 46%, #08090B 100%);
}

.blog-field::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8,9,11,.02), rgba(8,9,11,.68) 88%, #08090B 100%);
}

.blog-field__grid {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgba(151,154,162,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(151,154,162,.045) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0 66%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0 66%, transparent 96%);
}

.blog-field__axis {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(181,32,74,.48), rgba(151,154,162,.14), transparent);
    transform-origin: left center;
}

.blog-field__axis--a {
    top: 20rem;
    left: -8%;
    width: 72%;
    transform: rotate(-9deg);
}

.blog-field__axis--b {
    top: 47rem;
    right: -12%;
    width: 66%;
    transform: rotate(11deg);
}

.blog-field__beam {
    position: absolute;
    top: 8rem;
    right: clamp(3rem, 10vw, 12rem);
    width: 1px;
    height: min(72rem, 58vh);
    overflow: hidden;
    background: rgba(151,154,162,.10);
}

.blog-field__beam i {
    position: absolute;
    top: -18%;
    left: 0;
    width: 1px;
    height: 18%;
    background: linear-gradient(180deg, transparent, #B5204A, transparent);
    animation: blogBeamScan 9s linear infinite;
}

.blog-field__node {
    position: absolute;
    width: .48rem;
    aspect-ratio: 1;
    border: 1px solid rgba(181,32,74,.55);
    border-radius: 50%;
    background: #08090B;
    box-shadow: 0 0 0 .35rem rgba(181,32,74,.025);
}

.blog-field__node--a { top: 18.5rem; left: 20%; }
.blog-field__node--b { top: 31rem; right: 23%; }
.blog-field__node--c { top: 59rem; left: 14%; }
.blog-field__node--d { top: 77rem; right: 17%; }

.blog-field__stamp {
    position: absolute;
    top: 31rem;
    right: -6.2rem;
    font-family: var(--font-mono);
    font-size: .55rem;
    letter-spacing: .18em;
    color: rgba(151,154,162,.25);
    transform: rotate(90deg);
}

@keyframes blogBeamScan {
    to { transform: translateY(650%); }
}

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

.blog-hero {
    position: relative;
    min-height: min(52rem, 100svh);
    padding: clamp(8.5rem, 14vw, 11rem) 0 clamp(5rem, 8vw, 7.5rem);
    display: grid;
    align-items: center;
}

.blog-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.blog-hero__copy {
    max-width: 47rem;
}

.blog-kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .15em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.blog-kicker::before {
    content: "";
    width: 2.6rem;
    height: 1px;
    background: #B5204A;
}

.blog-kicker span:last-child {
    color: #CF5578;
}

.blog-hero h1 {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.15rem, 7vw, 7rem);
    font-weight: 560;
    line-height: .94;
    letter-spacing: -.055em;
}

.blog-hero__lead {
    max-width: 42rem;
    margin: 2rem 0 0;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.8;
    color: var(--color-text-soft);
}

.blog-hero__actions,
.blog-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2.1rem;
}

/* ================================================================
   BUTTONS / DISTINCT EFFECTS
================================================================ */

.page-blog .blog-button {
    min-width: 13.8rem;
    gap: 1rem;
    isolation: isolate;
}

.page-blog .blog-button::after {
    margin-left: .45rem;
    flex: 0 0 auto;
}

.blog-button--signal::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -34%;
    width: 26%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: skewX(-18deg);
    transition: left 620ms var(--ease-ap);
}

.blog-button--signal:hover::before,
.blog-button--signal:focus-visible::before {
    left: 112%;
}

.blog-button--trace {
    background: rgba(8,9,11,.44);
}

.blog-button--trace::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28%;
    height: 1px;
    background: #B5204A;
    transition: width 420ms var(--ease-ap), box-shadow 420ms var(--ease-ap);
}

.blog-button--trace:hover::before,
.blog-button--trace:focus-visible::before {
    width: 100%;
    box-shadow: 0 0 .75rem rgba(181,32,74,.38);
}

.blog-button--frame {
    width: fit-content;
    margin-top: 2rem;
}

.blog-button--frame::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid transparent;
    transition: border-color 320ms ease, inset 320ms var(--ease-ap);
}

.blog-button--frame:hover::before,
.blog-button--frame:focus-visible::before {
    inset: 3px;
    border-color: rgba(181,32,74,.34);
}

/* ================================================================
   RADAR
================================================================ */

.blog-radar {
    position: relative;
    min-height: 33rem;
    padding: 1rem;
    border: 1px solid rgba(151,154,162,.14);
    background:
        radial-gradient(circle at 50% 48%, rgba(139,21,56,.11), transparent 34%),
        rgba(8,9,11,.34);
}

.blog-radar::before,
.blog-radar::after {
    content: "";
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    pointer-events: none;
}

.blog-radar::before {
    top: -.5rem;
    left: -.5rem;
    border-top: 1px solid #B5204A;
    border-left: 1px solid #B5204A;
}

.blog-radar::after {
    right: -.5rem;
    bottom: -.5rem;
    border-right: 1px solid rgba(181,32,74,.55);
    border-bottom: 1px solid rgba(181,32,74,.55);
}

.blog-radar__meta,
.blog-radar__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-mono);
    font-size: .55rem;
    letter-spacing: .12em;
    color: rgba(151,154,162,.62);
    text-transform: uppercase;
}

.blog-radar__meta {
    padding-bottom: .8rem;
    border-bottom: 1px solid rgba(151,154,162,.10);
}

.blog-radar__system {
    position: relative;
    min-height: 27rem;
}

.blog-radar__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(151,154,162,.13);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.blog-radar__orbit--outer {
    width: min(84%, 22rem);
    aspect-ratio: 1;
    border-color: rgba(181,32,74,.20);
}

.blog-radar__orbit--outer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48%;
    height: 1px;
    background: linear-gradient(90deg, rgba(181,32,74,.62), transparent);
    transform-origin: left center;
    animation: blogRadarSweep 18s linear infinite;
}

.blog-radar__orbit--inner {
    width: min(46%, 12rem);
    aspect-ratio: 1;
    border-style: dashed;
}

@keyframes blogRadarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.blog-radar__core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 5rem;
    aspect-ratio: 1;
    border: 1px solid rgba(181,32,74,.48);
    border-radius: 50%;
    background: #090A0D;
    transform: translate(-50%, -50%);
}

.blog-radar__core strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -.06em;
}

.blog-radar__core small {
    margin-top: -1rem;
    font-family: var(--font-mono);
    font-size: .45rem;
    letter-spacing: .10em;
    color: #CF5578;
}

.blog-radar__point {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.65rem;
    aspect-ratio: 1;
    font-family: var(--font-mono);
    font-size: .48rem;
    font-style: normal;
    letter-spacing: .06em;
    color: var(--color-text-soft);
    border: 1px solid rgba(151,154,162,.20);
    border-radius: 50%;
    background: rgba(8,9,11,.88);
}

.blog-radar__point--1 { top: 15%; left: 46%; }
.blog-radar__point--2 { top: 31%; right: 10%; }
.blog-radar__point--3 { right: 18%; bottom: 18%; }
.blog-radar__point--4 { bottom: 12%; left: 28%; }
.blog-radar__point--5 { top: 42%; left: 8%; }
.blog-radar__point--6 { top: 20%; left: 18%; }

.blog-radar__footer {
    justify-content: center;
    padding-top: .8rem;
    border-top: 1px solid rgba(151,154,162,.10);
}

.blog-radar__footer i {
    width: 2.8rem;
    height: 1px;
    background: linear-gradient(90deg, #B5204A 0 38%, rgba(151,154,162,.16) 38%);
}

/* ================================================================
   SHARED SECTION HEAD
================================================================ */

.blog-topics,
.blog-featured,
.blog-library,
.blog-method,
.blog-cta {
    position: relative;
    padding: clamp(5rem, 9vw, 8rem) 0;
}

.blog-section-head {
    display: grid;
    grid-template-columns: minmax(12rem, .45fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: start;
    margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
}

.blog-section-head h2,
.blog-featured__intro h2,
.blog-method__intro h2,
.blog-cta h2 {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 4.8rem);
    font-weight: 540;
    line-height: 1;
    letter-spacing: -.045em;
}

.blog-section-head p,
.blog-featured__intro p,
.blog-method__intro p,
.blog-cta p {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--color-text-soft);
    line-height: 1.75;
}

/* ================================================================
   TOPIC RAIL
================================================================ */

.blog-topic-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid rgba(151,154,162,.13);
    border-bottom: 1px solid rgba(151,154,162,.13);
}

.blog-topic-rail a {
    position: relative;
    min-width: 0;
    min-height: 8.6rem;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    color: var(--color-text);
    border-right: 1px solid rgba(151,154,162,.10);
    transition: background 320ms ease, transform 320ms var(--ease-ap);
}

.blog-topic-rail a:first-child {
    border-left: 1px solid rgba(151,154,162,.10);
}

.blog-topic-rail a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #B5204A;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 340ms var(--ease-ap);
}

.blog-topic-rail a:hover,
.blog-topic-rail a:focus-visible {
    background: rgba(139,21,56,.055);
    transform: translateY(-.2rem);
}

.blog-topic-rail a:hover::after,
.blog-topic-rail a:focus-visible::after {
    transform: scaleX(1);
}

.blog-topic-rail span {
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .12em;
    color: #CF5578;
}

.blog-topic-rail strong {
    max-width: 12ch;
    font-family: var(--font-display);
    font-size: clamp(.95rem, 1.4vw, 1.18rem);
    font-weight: 530;
    line-height: 1.12;
}

/* ================================================================
   FEATURED SLOT
================================================================ */

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

.blog-featured__grid {
    display: grid;
    grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: start;
}

.blog-feature-card {
    position: relative;
    min-height: 28rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    overflow: hidden;
    border: 1px solid rgba(151,154,162,.15);
    background:
        linear-gradient(145deg, rgba(181,32,74,.035), transparent 36%),
        rgba(10,11,14,.76);
    transition: border-color 320ms ease, transform 360ms var(--ease-ap), background 320ms ease;
}

.blog-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28%;
    height: 1px;
    background: #B5204A;
}

.blog-feature-card:hover {
    transform: translateY(-.35rem);
    border-color: rgba(181,32,74,.30);
    background: rgba(10,11,14,.88);
}

.blog-feature-card__top,
.blog-feature-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.blog-feature-card__top {
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .12em;
    color: rgba(151,154,162,.68);
}

.blog-feature-card__top span:last-child {
    color: #CF5578;
}

.blog-feature-card__body {
    max-width: 43rem;
    margin-top: clamp(4rem, 9vw, 8rem);
}

.blog-feature-card__index {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    color: #CF5578;
}

.blog-feature-card h3 {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 530;
    line-height: 1;
    letter-spacing: -.04em;
}

.blog-feature-card p {
    max-width: 38rem;
    margin: 1.2rem 0 0;
    color: var(--color-text-soft);
    line-height: 1.75;
}

.blog-feature-card__route {
    position: absolute;
    top: 4.4rem;
    right: 2rem;
    display: flex;
    gap: .6rem;
}

.blog-feature-card__route i {
    width: .44rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(151,154,162,.28);
}

.blog-feature-card__route i:first-child,
.blog-feature-card__route i:last-child {
    border-color: rgba(181,32,74,.62);
    background: rgba(181,32,74,.18);
}

/* ================================================================
   LIBRARY
================================================================ */

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

.blog-library__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(151,154,162,.12);
    border: 1px solid rgba(151,154,162,.12);
}

.blog-collection {
    position: relative;
    min-height: 20rem;
    padding: clamp(1.3rem, 2.5vw, 2rem);
    overflow: hidden;
    background: #0A0B0E;
    scroll-margin-top: 7rem;
    transition: background 320ms ease, transform 340ms var(--ease-ap);
}

.blog-collection::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #8B1538, #B5204A, transparent);
    transition: width 440ms var(--ease-ap);
}

.blog-collection:hover {
    z-index: 2;
    background: #0D0D11;
    transform: translateY(-.2rem);
}

.blog-collection:hover::after {
    width: 74%;
}

.blog-collection__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .10em;
    color: rgba(151,154,162,.62);
}

.blog-collection__meta span:first-child {
    color: #CF5578;
}

.blog-collection h3 {
    margin: clamp(3.5rem, 7vw, 6rem) 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.4vw, 2.4rem);
    font-weight: 530;
    letter-spacing: -.035em;
}

.blog-collection p {
    margin: .9rem 0 0;
    color: var(--color-text-soft);
    line-height: 1.65;
}

.blog-collection__state {
    position: absolute;
    left: clamp(1.3rem, 2.5vw, 2rem);
    bottom: 1.4rem;
    font-family: var(--font-mono);
    font-size: .52rem;
    letter-spacing: .10em;
    color: rgba(151,154,162,.55);
    text-transform: uppercase;
}

.blog-collection__state::before {
    content: "";
    display: inline-block;
    width: .38rem;
    aspect-ratio: 1;
    margin-right: .55rem;
    border-radius: 50%;
    background: #B5204A;
}

/* ================================================================
   METHOD
================================================================ */

.blog-method__grid {
    display: grid;
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 9rem);
}

.blog-method__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(151,154,162,.14);
}

.blog-method__steps li {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.45rem .25rem;
    border-bottom: 1px solid rgba(151,154,162,.12);
    transition: padding-left 300ms var(--ease-ap), background 300ms ease;
}

.blog-method__steps li:hover {
    padding-left: .65rem;
    background: rgba(139,21,56,.035);
}

.blog-method__steps li > span {
    font-family: var(--font-mono);
    font-size: .55rem;
    letter-spacing: .10em;
    color: #CF5578;
}

.blog-method__steps strong {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 560;
}

.blog-method__steps p {
    margin: .35rem 0 0;
    color: var(--color-text-soft);
    line-height: 1.6;
}

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

.blog-cta {
    padding-top: 2rem;
}

.blog-cta__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(2rem, 5vw, 4.5rem);
    overflow: hidden;
    border: 1px solid rgba(151,154,162,.16);
    background:
        linear-gradient(110deg, rgba(139,21,56,.10), transparent 38%),
        rgba(10,11,14,.80);
}

.blog-cta__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8rem;
    height: 1px;
    background: #B5204A;
}

.blog-cta__panel > div:first-child > span {
    display: inline-block;
    margin-bottom: 1.1rem;
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .14em;
    color: #CF5578;
}

.blog-cta__actions {
    margin-top: 0;
    justify-content: flex-end;
}

.blog-footer {
    margin-top: clamp(5rem, 9vw, 8rem);
}

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

@media (max-width: 1099px) {
    .blog-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, .72fr);
        gap: 3rem;
    }

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

    .blog-topic-rail a:nth-child(3) {
        border-right: 0;
    }

    .blog-topic-rail a:nth-child(-n+3) {
        border-bottom: 1px solid rgba(151,154,162,.10);
    }

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

    .blog-cta__panel {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .blog-cta__actions {
        justify-content: flex-start;
    }
}

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

@media (max-width: 767px) {
    .blog-field__grid {
        opacity: .22;
        background-size: 3.8rem 3.8rem;
    }

    .blog-field__axis--a {
        top: 17rem;
        left: -35%;
        width: 112%;
        transform: rotate(-13deg);
    }

    .blog-field__axis--b {
        top: 42rem;
        right: -45%;
        width: 116%;
        transform: rotate(14deg);
    }

    .blog-field__beam {
        top: 7rem;
        right: 1.2rem;
        height: 28rem;
        opacity: .55;
    }

    .blog-field__beam i {
        animation-duration: 14s;
    }

    .blog-field__node--a { top: 14rem; left: 12%; }
    .blog-field__node--b { top: 27rem; right: 11%; }
    .blog-field__node--c,
    .blog-field__node--d,
    .blog-field__stamp { display: none; }

    .blog-hero {
        min-height: 0;
        padding: 7.2rem 0 4.8rem;
    }

    .blog-hero__grid,
    .blog-featured__grid,
    .blog-method__grid,
    .blog-section-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-hero__grid {
        gap: 3.2rem;
    }

    .blog-kicker {
        gap: .7rem;
        margin-bottom: 1.35rem;
        font-size: .58rem;
    }

    .blog-kicker::before {
        width: 1.7rem;
    }

    .blog-hero h1 {
        max-width: 10ch;
        font-size: clamp(3rem, 15vw, 4.7rem);
    }

    .blog-hero__lead {
        margin-top: 1.4rem;
        font-size: .98rem;
        line-height: 1.7;
    }

    .blog-hero__actions,
    .blog-cta__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-blog .blog-button {
        width: fit-content !important;
        max-width: 100%;
        min-width: min(100%, 15.5rem);
        padding-inline: .82rem;
        gap: .72rem;
        white-space: normal;
        text-align: left;
    }

    .page-blog .blog-button::after {
        margin-left: .35rem;
    }

    .blog-radar {
        width: min(100%, 25rem);
        min-height: 25rem;
        margin-inline: auto;
        padding: .82rem;
    }

    .blog-radar__system {
        min-height: 20.5rem;
    }

    .blog-radar__orbit--outer {
        width: min(78%, 17rem);
    }

    .blog-radar__orbit--inner {
        width: min(42%, 9rem);
    }

    .blog-radar__orbit--outer::after {
        width: 45%;
        animation-duration: 28s;
    }

    .blog-radar__point {
        width: 2.25rem;
        font-size: .42rem;
    }

    .blog-radar__point--1 { top: 12%; left: 45%; }
    .blog-radar__point--2 { top: 29%; right: 8%; }
    .blog-radar__point--3 { right: 14%; bottom: 15%; }
    .blog-radar__point--4 { bottom: 9%; left: 27%; }
    .blog-radar__point--5 { top: 43%; left: 5%; }
    .blog-radar__point--6 { top: 18%; left: 13%; }

    .blog-topics,
    .blog-featured,
    .blog-library,
    .blog-method,
    .blog-cta {
        padding: 4.8rem 0;
    }

    .blog-section-head {
        gap: .5rem;
        margin-bottom: 2.3rem;
    }

    .blog-section-head h2,
    .blog-featured__intro h2,
    .blog-method__intro h2,
    .blog-cta h2 {
        font-size: clamp(2.2rem, 10vw, 3.35rem);
    }

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

    .blog-topic-rail a {
        min-height: 7.2rem;
        padding: 1rem .82rem;
    }

    .blog-topic-rail a:nth-child(odd) {
        border-left: 1px solid rgba(151,154,162,.10);
    }

    .blog-topic-rail a:nth-child(even) {
        border-right: 0;
    }

    .blog-topic-rail a:nth-child(-n+4) {
        border-bottom: 1px solid rgba(151,154,162,.10);
    }

    .blog-featured__grid,
    .blog-method__grid {
        gap: 2.8rem;
    }

    .blog-feature-card {
        min-height: 30rem;
        padding: 1.3rem;
    }

    .blog-feature-card__body {
        margin-top: 4.8rem;
    }

    .blog-feature-card h3 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .blog-feature-card__route {
        top: 3.8rem;
        right: 1.3rem;
    }

    .blog-library__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-collection {
        min-height: 17.5rem;
        padding: 1.25rem;
    }

    .blog-collection h3 {
        margin-top: 3.8rem;
    }

    .blog-collection__state {
        left: 1.25rem;
        bottom: 1.2rem;
    }

    .blog-method__steps li {
        grid-template-columns: 2.3rem minmax(0,1fr);
        padding-block: 1.25rem;
    }

    .blog-cta {
        padding-top: 1rem;
    }

    .blog-cta__panel {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 399px) {
    .blog-radar__meta,
    .blog-radar__footer {
        font-size: .48rem;
    }

    .blog-radar__footer i {
        width: 1.5rem;
    }

    .blog-topic-rail strong {
        font-size: .92rem;
    }

    .blog-feature-card__top {
        flex-direction: column;
        gap: .35rem;
    }

    .page-blog .blog-button {
        min-width: 0;
        width: 100% !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .blog-topic-rail a:active,
    .blog-collection:active,
    .blog-feature-card:active {
        border-color: rgba(181,32,74,.30);
        background: rgba(139,21,56,.055);
    }

    .blog-button--signal:active::before {
        left: 112%;
    }

    .blog-button--trace:active::before {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-field__beam i,
    .blog-radar__orbit--outer::after {
        animation: none !important;
    }
}

/* === AP BLOG FOOTER ALIGN V2 20260830 === */


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

   Replica la misma arquitectura visual utilizada por
   Empresa, SaaS, Contacto y demás páginas AP.
================================================================ */

.blog-footer {

    position:
        relative;

    z-index:
        3;

    margin-top:
        clamp(
            5rem,
            9vw,
            8rem
        );

    padding:

        clamp(
            3.5rem,
            6vw,
            5.5rem
        )

        0

        1.5rem;

    background:
        #08090B;

    border-top:

        1px solid
        rgba(
            52,
            54,
            61,
            .55
        );
}


/* ================================================================
   LÍNEA AP CENTRAL
================================================================ */

.blog-footer::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        -1px;

    width:
        min(
            8rem,
            28vw
        );

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;
}


/* ================================================================
   ESTRUCTURA PRINCIPAL
================================================================ */

.blog-footer
.site-footer__grid {

    display:
        grid;

    grid-template-columns:

        minmax(
            0,
            .8fr
        )

        minmax(
            0,
            1.2fr
        );

    gap:

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

    align-items:
        start;
}


/* ================================================================
   MARCA
================================================================ */

.blog-footer
.site-footer__brand {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        1rem;

    min-width:
        0;
}


.blog-footer
.site-footer__brand > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        .4rem;

    min-width:
        0;
}


.blog-footer
.site-footer__brand strong {

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

    text-transform:
        uppercase;
}


.blog-footer
.site-footer__brand > div span {

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

    font-size:
        .82rem;

    line-height:
        1.55;
}


/* ================================================================
   COLUMNAS DEL FOOTER
================================================================ */

.blog-footer
.site-footer__nav {

    display:
        grid;

    grid-template-columns:

        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        2rem;

    min-width:
        0;
}


.blog-footer
.site-footer__nav > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        .68rem;

    min-width:
        0;
}


/* Títulos:
   Explorar / Empezar / Legal
*/

.blog-footer
.site-footer__nav strong {

    margin-bottom:
        .25rem;

    color:
        #CF5578;

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

    font-size:
        .63rem;

    letter-spacing:
        .12em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}


/* ================================================================
   ENLACES
================================================================ */

.blog-footer
.site-footer__nav a {

    position:
        relative;

    width:
        fit-content;

    max-width:
        100%;

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

    font-size:
        .87rem;

    line-height:
        1.45;

    overflow-wrap:
        normal;

    word-break:
        normal;
}


/* ================================================================
   PARTE INFERIOR
================================================================ */

.blog-footer
.site-footer__bottom {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        1rem;

    margin-top:
        4rem;

    padding-top:
        1.25rem;

    border-top:

        1px solid
        rgba(
            52,
            54,
            61,
            .48
        );

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

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

    font-size:
        .61rem;

    letter-spacing:
        .08em;

    line-height:
        1.5;

    text-transform:
        uppercase;
}


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

@media (max-width: 900px) {

    .blog-footer
    .site-footer__grid {

        grid-template-columns:
            1fr;

        gap:
            2.8rem;
    }


    .blog-footer
    .site-footer__nav {

        grid-template-columns:

            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            2rem
            1.4rem;
    }


    .blog-footer
    .site-footer__bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            2.7rem;
    }

}


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

@media (max-width: 479px) {

    .blog-footer {

        margin-top:
            4.5rem;

        padding:

            3.2rem
            0
            1.35rem;
    }


    .blog-footer
    .site-footer__grid {

        gap:
            2.35rem;
    }


    /*
    En móvil:
        EXPLORAR
        enlaces

        EMPEZAR
        enlaces

        LEGAL
        enlaces

    No se amontonan horizontalmente.
    */

    .blog-footer
    .site-footer__nav {

        grid-template-columns:
            1fr;

        gap:
            1.75rem;
    }


    .blog-footer
    .site-footer__nav > div {

        gap:
            .62rem;
    }


    .blog-footer
    .site-footer__nav a {

        font-size:
            .86rem;

        line-height:
            1.48;
    }


    .blog-footer
    .site-footer__bottom {

        margin-top:
            2.25rem;

        gap:
            .55rem;
    }

}