/* =========================================================
   BLOQUE 05 — DATA ECOSYSTEM
   ID: adv-b05-data-ecosystem
   ========================================================= */

#adv-b05-data-ecosystem {
    --adv-b05-black: #080807;
    --adv-b05-black-soft: #0d0c0a;
    --adv-b05-white: #f5f3ec;
    --adv-b05-gold: #c1a168;
    --adv-b05-soft-gold: #ebd89d;
    --adv-b05-line: rgba(193, 161, 104, 0.25);
    --adv-b05-line-soft: rgba(235, 216, 157, 0.11);

    position: relative;
    z-index: 1;

    width: 100%;
    overflow: hidden;

    color: var(--adv-b05-white);
    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(193, 161, 104, 0.055),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(235, 216, 157, 0.025),
            transparent 28%
        ),
        var(--adv-b05-black);
}


/* Textura sutil */

#adv-b05-data-ecosystem::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000000 18%,
        #000000 82%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        #000000 18%,
        #000000 82%,
        transparent
    );
}


/* =========================================================
   GRILLA PRINCIPAL
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 48%)
        minmax(0, 52%);

    width: 100%;
    min-height: clamp(780px, 78vw, 1040px);

    border-top: 1px solid rgba(193, 161, 104, 0.19);
    border-bottom: 1px solid rgba(193, 161, 104, 0.19);
}


/* =========================================================
   CONTENIDO EDITORIAL
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding:
        clamp(100px, 10vw, 170px)
        clamp(38px, 7vw, 120px);

    border-right: 1px solid rgba(193, 161, 104, 0.23);
}


/* ÍNDICE */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__index {
    position: absolute;
    top: clamp(36px, 4vw, 64px);
    left: clamp(38px, 7vw, 120px);

    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(245, 243, 236, 0.36);

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ETIQUETA */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;

    margin: 0 0 clamp(32px, 4vw, 56px);

    color: var(--adv-b05-soft-gold);

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__eyebrow::before {
    content: "";

    flex: 0 0 44px;

    height: 1px;

    background: var(--adv-b05-gold);
}


/* =========================================================
   H2 SANGBLEU
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__title {
    margin: 0;

    font-family:
        "SangBleu Empire",
        "Times New Roman",
        serif;

    font-size: clamp(60px, 6.7vw, 116px);
    font-weight: 600;
    line-height: 0.86;
    letter-spacing: -0.055em;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__title-line {
    display: block;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__title-line--gold {
    margin-top: 0.08em;

    color: var(--adv-b05-soft-gold);

    font-style: italic;
    font-weight: 400;
}


/* =========================================================
   TEXTO SEO
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__description {
    max-width: 650px;

    margin:
        clamp(38px, 4.5vw, 68px)
        0
        0;

    color: rgba(245, 243, 236, 0.64);

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: clamp(14px, 1.15vw, 18px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.01em;
}


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

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__cta {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: min(100%, 590px);

    margin-top: clamp(44px, 5vw, 72px);
    padding: 20px 0;

    overflow: hidden;

    color: #ffffff;
    border-top: 1px solid rgba(193, 161, 104, 0.34);
    border-bottom: 1px solid rgba(193, 161, 104, 0.34);

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.19em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.4s ease,
        padding-left 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(193, 161, 104, 0.1),
        transparent 70%
    );

    opacity: 0;
    transform: translateX(-100%);

    transition:
        opacity 0.45s ease,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:hover,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:focus-visible {
    color: var(--adv-b05-soft-gold);
    padding-left: 15px;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:hover::before,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:focus-visible::before {
    opacity: 1;
    transform: translateX(0);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:focus-visible {
    outline: 1px solid var(--adv-b05-soft-gold);
    outline-offset: 5px;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta > span {
    position: relative;
    z-index: 1;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta-arrow {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    color: var(--adv-b05-soft-gold);
    border: 1px solid rgba(193, 161, 104, 0.6);
    border-radius: 50%;

    font-size: 15px;
    letter-spacing: 0;

    transition:
        color 0.4s ease,
        background-color 0.4s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:hover
.adv-b05-data-ecosystem__cta-arrow,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__cta:focus-visible
.adv-b05-data-ecosystem__cta-arrow {
    color: #111111;
    background: var(--adv-b05-soft-gold);
    transform: rotate(-35deg);
}


/* =========================================================
   ESCENARIO GEOMÉTRICO
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__visual {
    position: relative;

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

    min-width: 0;
    min-height: inherit;

    padding:
        clamp(65px, 6vw, 110px)
        clamp(24px, 4vw, 70px);

    overflow: hidden;
}


/* Halo de fondo */

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__visual::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: min(78vw, 880px);
    aspect-ratio: 1;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(193, 161, 104, 0.07) 0%,
        rgba(193, 161, 104, 0.025) 36%,
        transparent 68%
    );

    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* Etiquetas del escenario */

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__visual-label,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__visual-corner {
    position: absolute;
    z-index: 3;

    color: rgba(245, 243, 236, 0.28);

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__visual-label {
    top: clamp(34px, 4vw, 60px);
    left: clamp(24px, 4vw, 70px);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__visual-corner {
    right: clamp(24px, 4vw, 70px);
    bottom: clamp(34px, 4vw, 60px);
}


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

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__svg {
    position: relative;
    z-index: 2;

    display: block;

    width: min(100%, 900px);
    height: auto;

    overflow: visible;
}


/* =========================================================
   ÓRBITAS
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__orbit {
    fill: none;

    stroke: var(--adv-b05-line-soft);
    stroke-width: 1;
    stroke-dasharray: 2 9;

    vector-effect: non-scaling-stroke;

    transform-origin: 380px 350px;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__orbit--middle {
    stroke: rgba(193, 161, 104, 0.075);
    stroke-dasharray: 1 12;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__orbit--inner {
    stroke: rgba(235, 216, 157, 0.13);
    stroke-dasharray: 3 8;
}


/* =========================================================
   CONEXIONES
   ========================================================= */

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__connection {
    fill: none;

    stroke: rgba(193, 161, 104, 0.28);
    stroke-width: 1;
    stroke-dasharray: 4 8;
    stroke-linecap: round;

    vector-effect: non-scaling-stroke;
}


/* =========================================================
   NÚCLEO
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__core {
    transform-box: fill-box;
    transform-origin: center;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__core-aura {
    opacity: 0.8;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__core-ring {
    fill: rgba(8, 8, 7, 0.7);

    stroke: rgba(193, 161, 104, 0.58);
    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__core-ring--inner {
    stroke: rgba(235, 216, 157, 0.23);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__core-point {
    fill: var(--adv-b05-soft-gold);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__core-text {
    fill: #ffffff;

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__core-text--secondary {
    fill: var(--adv-b05-soft-gold);

    font-size: 7px;
    letter-spacing: 0.16em;
}


/* =========================================================
   NODOS
   ========================================================= */

#adv-b05-data-ecosystem .adv-b05-data-ecosystem__node {
    cursor: default;

    transform-box: fill-box;
    transform-origin: center;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node-aura {
    fill: rgba(193, 161, 104, 0);

    transition: fill 0.65s ease;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node-ring {
    fill: rgba(8, 8, 7, 0.62);

    stroke: rgba(193, 161, 104, 0.52);
    stroke-width: 1;

    vector-effect: non-scaling-stroke;

    transition:
        fill 0.55s ease,
        stroke 0.55s ease;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node-point {
    fill: var(--adv-b05-gold);

    opacity: 0.42;

    transition:
        fill 0.45s ease,
        opacity 0.45s ease;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node-text {
    fill: rgba(255, 255, 255, 0.88);

    font-family:
        "Manrope",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;

    transition: fill 0.45s ease;
}


/* Nodo iluminado */

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node.is-active
.adv-b05-data-ecosystem__node-aura,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node:hover
.adv-b05-data-ecosystem__node-aura {
    fill: rgba(193, 161, 104, 0.09);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node.is-active
.adv-b05-data-ecosystem__node-ring,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node:hover
.adv-b05-data-ecosystem__node-ring {
    fill: rgba(193, 161, 104, 0.055);
    stroke: var(--adv-b05-soft-gold);
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node.is-active
.adv-b05-data-ecosystem__node-point,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node:hover
.adv-b05-data-ecosystem__node-point {
    fill: var(--adv-b05-soft-gold);
    opacity: 1;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node.is-active
.adv-b05-data-ecosystem__node-text,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__node:hover
.adv-b05-data-ecosystem__node-text {
    fill: var(--adv-b05-soft-gold);
}


/* =========================================================
   PARTÍCULAS
   ========================================================= */

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__particle {
    fill: var(--adv-b05-soft-gold);

    opacity: 0;

    filter: url("#adv-b05-gold-glow");
    pointer-events: none;

    will-change: transform, opacity;
}

#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__particle--orbit {
    fill: #fff3c4;
}


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

@media (max-width: 1100px) {

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__grid {
        grid-template-columns:
            minmax(0, 44%)
            minmax(0, 56%);

        min-height: 820px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__content {
        padding:
            110px
            42px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__index {
        left: 42px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__title {
        font-size: clamp(54px, 7vw, 78px);
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual {
        padding:
            80px
            20px;
    }
}


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

@media (max-width: 767px) {

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__grid {
        display: block;
        min-height: 0;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__content {
        min-height: auto;

        padding:
            105px
            24px
            85px;

        border-right: 0;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__index {
        top: 34px;
        left: 24px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__eyebrow {
        margin-bottom: 34px;

        font-size: 9px;
        letter-spacing: 0.19em;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__eyebrow::before {
        flex-basis: 32px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__title {
        font-size: clamp(54px, 16.5vw, 78px);
        line-height: 0.9;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__description {
        margin-top: 38px;

        font-size: 14px;
        line-height: 1.75;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__cta {
        width: 100%;
        margin-top: 45px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual {
        min-height: 600px;

        padding:
            75px
            6px;

        border-top: 1px solid rgba(193, 161, 104, 0.22);
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__svg {
        width: min(116%, 680px);
        max-width: none;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual-label {
        top: 26px;
        left: 24px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual-corner {
        right: 24px;
        bottom: 25px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__node-text {
        font-size: 10px;
    }
}


/* =========================================================
   MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual {
        min-height: 510px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__svg {
        width: 122%;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__node-text {
        font-size: 11px;
        letter-spacing: 0.08em;
    }
}


/* =========================================================
   ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   ========================================================= */

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

    #adv-b05-data-ecosystem *,
    #adv-b05-data-ecosystem *::before,
    #adv-b05-data-ecosystem *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }

    #adv-b05-data-ecosystem
.adv-b05-data-ecosystem__particle,
#adv-b05-data-ecosystem
.adv-b05-data-ecosystem__traveler {
    display: none;
      }
}

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

@media (max-width: 1100px) {

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__grid {
        grid-template-columns:
            minmax(0, 44%)
            minmax(0, 56%);

        min-height: 820px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__content {
        padding:
            110px
            42px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__index {
        left: 42px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__title {
        font-size: clamp(54px, 7vw, 78px);
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual {
        padding:
            80px
            20px;
    }
}


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

@media (max-width: 767px) {

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__grid {
        display: block;
        min-height: 0;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__content {
        min-height: auto;

        padding:
            105px
            24px
            85px;

        border-right: 0;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__index {
        top: 34px;
        left: 24px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__eyebrow {
        margin-bottom: 34px;

        font-size: 9px;
        letter-spacing: 0.19em;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__eyebrow::before {
        flex-basis: 32px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__title {
        font-size: clamp(54px, 16.5vw, 78px);
        line-height: 0.9;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__description {
        margin-top: 38px;

        font-size: 14px;
        line-height: 1.75;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__cta {
        width: 100%;
        margin-top: 45px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual {
        min-height: 600px;

        padding:
            75px
            6px;

        border-top: 1px solid rgba(193, 161, 104, 0.22);
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__svg {
        width: min(116%, 680px);
        max-width: none;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual-label {
        top: 26px;
        left: 24px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual-corner {
        right: 24px;
        bottom: 25px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__node-text {
        font-size: 10px;
    }
}


/* =========================================================
   MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__visual {
        min-height: 510px;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__svg {
        width: 122%;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__node-text {
        font-size: 11px;
        letter-spacing: 0.08em;
    }
}


/* =========================================================
   ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   ========================================================= */

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

    #adv-b05-data-ecosystem *,
    #adv-b05-data-ecosystem *::before,
    #adv-b05-data-ecosystem *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }

    #adv-b05-data-ecosystem
    .adv-b05-data-ecosystem__particle {
        display: none;
    }
}