/* =========================================================
   BLOQUE 04 — SISTEMA ADVANIZE VISUAL
   ID: adv-b04-system-visual
   ========================================================= */

#adv-b04-system-visual {
    --adv-b04-white: #ffffff;
    --adv-b04-black: #080808;
    --adv-b04-gold: #c1a168;
    --adv-b04-soft-gold: #ebd89d;
    --adv-b04-border: rgba(17, 17, 17, 0.16);

    position: relative;
    z-index: 1;

    width: 100%;
    overflow: hidden;

    color: #111111;
    background: var(--adv-b04-white);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__container {
    width: min(100%, 1800px);
    margin: 0 auto;

    padding:
        clamp(110px, 11vw, 190px)
        clamp(24px, 5vw, 90px)
        clamp(100px, 10vw, 170px);
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);
    column-gap: clamp(50px, 8vw, 140px);
    align-items: end;

    margin-bottom: clamp(70px, 8vw, 125px);
}


/* TÍTULO EDITORIAL SANGBLEU */

#adv-b04-system-visual .adv-b04-system-visual__display {
    grid-column: 1 / -1;

    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.18em;

    width: 100%;
    max-width: none;
    margin: 0 0 clamp(48px, 6vw, 90px);
    text-align: center;

    color: var(--adv-b04-black);

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

    font-size: clamp(70px, 8.1vw, 148px);
    font-weight: 600;
    line-height: 0.86;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    
}

#adv-b04-system-visual
.adv-b04-system-visual__display-gold {
    color: var(--adv-b04-gold);
}

/* H2 SEO */

#adv-b04-system-visual .adv-b04-system-visual__title {
    max-width: 900px;
    margin: 0;

    color: #111111;

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

    font-size: clamp(27px, 3.1vw, 52px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}


/* TEXTO INTRODUCTORIO */

#adv-b04-system-visual .adv-b04-system-visual__intro {
    max-width: 520px;
    margin: 0 0 5px;

    color: rgba(17, 17, 17, 0.68);

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

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


/* =========================================================
   ACORDEÓN VISUAL
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__cards {
    display: flex;
    align-items: stretch;

    width: 100%;
    min-height: clamp(580px, 48vw, 760px);

    overflow: hidden;

    background: var(--adv-b04-black);
    border: 1px solid rgba(17, 17, 17, 0.12);
}


/* =========================================================
   CARD
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__card {
    position: relative;

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

    overflow: hidden;
    isolation: isolate;

    color: #ffffff;
    background: var(--adv-b04-black);
    border-right: 1px solid rgba(255, 255, 255, 0.22);

    cursor: pointer;
    outline: none;

    transition:
        flex-grow 1s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.6s ease;
}

#adv-b04-system-visual
.adv-b04-system-visual__card:last-child {
    border-right: 0;
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible {
    flex-grow: 2.45;
}


/* =========================================================
   IMAGEN
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__image {
    position: absolute;
    inset: -2%;
    z-index: -3;

    display: block;

    width: 104%;
    height: 104%;

    object-fit: cover;
    object-position: center;

    opacity: 0.18;

    filter:
        grayscale(1)
        brightness(0.48)
        contrast(1.08);

    transform: scale(1.08);

    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active
.adv-b04-system-visual__image,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover
.adv-b04-system-visual__image,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible
.adv-b04-system-visual__image {
    opacity: 1;

    filter:
        grayscale(0)
        brightness(0.82)
        contrast(1.04);

    transform: scale(1);
}


/* =========================================================
   CAPA DE CONTRASTE
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__shade {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.94) 0%,
            rgba(0, 0, 0, 0.58) 38%,
            rgba(0, 0, 0, 0.16) 72%,
            rgba(0, 0, 0, 0.42) 100%
        );

    transition: background 0.8s ease;
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active
.adv-b04-system-visual__shade,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover
.adv-b04-system-visual__shade,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible
.adv-b04-system-visual__shade {
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.43) 42%,
            rgba(0, 0, 0, 0.06) 74%,
            rgba(0, 0, 0, 0.2) 100%
        );
}


/* LUZ DORADA SUPERIOR */

#adv-b04-system-visual
.adv-b04-system-visual__card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--adv-b04-soft-gold),
        transparent
    );

    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;

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

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active::before,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover::before,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
}


/* =========================================================
   CONTENIDO DE CARD
   ========================================================= */

#adv-b04-system-visual .adv-b04-system-visual__card-content {
    position: absolute;
    inset: 0;
    z-index: 3;

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

    padding:
        clamp(26px, 2.7vw, 48px)
        clamp(22px, 2.3vw, 40px);
}


/* NÚMERO */

#adv-b04-system-visual .adv-b04-system-visual__number {
    position: absolute;
    top: clamp(24px, 2.6vw, 42px);
    left: clamp(22px, 2.3vw, 40px);

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

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

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;

    transition:
        color 0.5s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active
.adv-b04-system-visual__number,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover
.adv-b04-system-visual__number,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible
.adv-b04-system-visual__number {
    color: #ffffff;
    transform: translateX(5px);
}


/* H3 */

#adv-b04-system-visual .adv-b04-system-visual__card-title {
    max-width: 360px;
    margin: 0;

    color: #ffffff;

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

    font-size: clamp(21px, 1.85vw, 31px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;

    transform: translateY(0);

    transition:
        color 0.5s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active
.adv-b04-system-visual__card-title,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover
.adv-b04-system-visual__card-title,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible
.adv-b04-system-visual__card-title {
    color: var(--adv-b04-soft-gold);
    transform: translateY(-8px);
}


/* DESCRIPCIÓN */

#adv-b04-system-visual
.adv-b04-system-visual__card-description {
    max-width: 430px;
    max-height: 0;

    margin: 0;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.82);

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

    font-size: clamp(12px, 1vw, 15px);
    font-weight: 400;
    line-height: 1.65;

    opacity: 0;
    transform: translateY(24px);

    transition:
        max-height 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        margin-top 0.8s ease,
        opacity 0.55s ease,
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active
.adv-b04-system-visual__card-description,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover
.adv-b04-system-visual__card-description,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible
.adv-b04-system-visual__card-description {
    max-height: 150px;
    margin-top: 14px;

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


/* FLECHA */

#adv-b04-system-visual .adv-b04-system-visual__arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    color: #111111;
    background: var(--adv-b04-soft-gold);
    border-radius: 50%;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 18px;
    line-height: 1;

    opacity: 0;
    transform: translateY(18px) rotate(-35deg);

    transition:
        max-height 0.6s ease,
        margin-top 0.7s ease,
        opacity 0.5s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#adv-b04-system-visual
.adv-b04-system-visual__card.is-active
.adv-b04-system-visual__arrow,
#adv-b04-system-visual
.adv-b04-system-visual__card:hover
.adv-b04-system-visual__arrow,
#adv-b04-system-visual
.adv-b04-system-visual__card:focus-visible
.adv-b04-system-visual__arrow {
    max-height: 42px;
    margin-top: 24px;

    opacity: 1;
    transform: translateY(0) rotate(0);
}


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

@media (max-width: 1100px) {

    #adv-b04-system-visual .adv-b04-system-visual__header {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    #adv-b04-system-visual .adv-b04-system-visual__display {
        margin-bottom: 35px;
    }

    #adv-b04-system-visual .adv-b04-system-visual__title {
        max-width: 800px;
    }

    #adv-b04-system-visual .adv-b04-system-visual__intro {
        max-width: 650px;
    }

    #adv-b04-system-visual .adv-b04-system-visual__cards {
        min-height: 650px;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__card.is-active,
    #adv-b04-system-visual
    .adv-b04-system-visual__card:hover,
    #adv-b04-system-visual
    .adv-b04-system-visual__card:focus-visible {
        flex-grow: 3;
    }
}


/* =========================================================
   MÓVIL — ACORDEÓN VERTICAL
   ========================================================= */

@media (max-width: 767px) {

    #adv-b04-system-visual .adv-b04-system-visual__container {
        padding:
            100px
            20px
            90px;
    }

    #adv-b04-system-visual .adv-b04-system-visual__header {
        margin-bottom: 58px;
    }

   #adv-b04-system-visual .adv-b04-system-visual__display {
    display: block;

    margin-bottom: 20px;

    font-size: clamp(62px, 20vw, 96px);
    line-height: 0.84;
    white-space: normal;
}

#adv-b04-system-visual
.adv-b04-system-visual__display-gold {
    display: block;
}
    #adv-b04-system-visual .adv-b04-system-visual__intro {
        margin-top: 3px;
        font-size: 14px;
        line-height: 1.7;
    }

    #adv-b04-system-visual .adv-b04-system-visual__cards {
        display: block;
        min-height: 0;
    }

    #adv-b04-system-visual .adv-b04-system-visual__card {
        width: 100%;
        min-height: 132px;
        height: 132px;

        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);

        transition:
            height 1s cubic-bezier(0.16, 1, 0.3, 1),
            background-color 0.6s ease;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__card:last-child {
        border-bottom: 0;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__card.is-active,
    #adv-b04-system-visual
    .adv-b04-system-visual__card:hover,
    #adv-b04-system-visual
    .adv-b04-system-visual__card:focus-visible {
        height: min(72vh, 560px);
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__card-content {
        padding: 24px 22px;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__number {
        top: 20px;
        left: auto;
        right: 20px;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__card-title {
        max-width: calc(100% - 55px);
        font-size: clamp(20px, 6vw, 27px);
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__card-description {
        max-width: 92%;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

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

    #adv-b04-system-visual *,
    #adv-b04-system-visual *::before,
    #adv-b04-system-visual *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   B04 — CORRECCIÓN FINAL MÓVIL
   Evita desbordes del encabezado editorial
   ========================================================= */

@media (max-width: 767px) {

    #adv-b04-system-visual
    .adv-b04-system-visual__container {
        width: 100%;
        max-width: 100%;

        padding:
            90px
            22px
            82px;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__header {
        width: 100%;
        min-width: 0;

        margin-bottom: 58px;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__display {
        width: 100%;
        max-width: 100%;

        margin-bottom: 36px;

        font-size: clamp(
            48px,
            16.2vw,
            68px
        );

        line-height: 0.86;
        letter-spacing: -0.065em;

        text-align: left;
        white-space: normal;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__display span {
        display: block;
        max-width: 100%;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__title {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        font-size: clamp(
            23px,
            6.8vw,
            28px
        );

        line-height: 1.13;
        letter-spacing: 0;
    }

    #adv-b04-system-visual
    .adv-b04-system-visual__intro {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-top: 8px;

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