/* =========================================================
   BLOQUE 02 — SYSTEM INTRO
   ID: adv-b02-system-intro
   ========================================================= */

#adv-b02-system-intro {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0;

    padding:
        clamp(64px, 7vw, 96px)
        clamp(24px, 4vw, 64px)
        clamp(34px, 4vw, 56px);

    overflow: hidden;

    background: #ffffff;
}


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

#adv-b02-system-intro .adv-b02-system-intro__inner {
    width: min(100%, 1440px);
    margin: 0 auto;
}


/* =========================================================
   FILA DEL TÍTULO
   ========================================================= */

#adv-b02-system-intro .adv-b02-system-intro__heading {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    gap: clamp(20px, 3vw, 44px);
}


/* =========================================================
   LÍNEAS DORADAS
   ========================================================= */

#adv-b02-system-intro .adv-b02-system-intro__line {
    display: block;
    flex: 0 1 92px;

    width: clamp(54px, 7vw, 92px);
    height: 3px;

    background: #c1a168;

    opacity: 1;
    transform: scaleX(1);

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

#adv-b02-system-intro
.adv-b02-system-intro__line:first-child {
    transform-origin: right center;
}

#adv-b02-system-intro
.adv-b02-system-intro__line:last-child {
    transform-origin: left center;
}


/* =========================================================
   MÁSCARA DEL TÍTULO
   ========================================================= */

#adv-b02-system-intro .adv-b02-system-intro__title-mask {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0.08em 0;
}


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

#adv-b02-system-intro .adv-b02-system-intro__title {
    margin: 0;

    color: #111111;

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

    font-size: clamp(40px, 4.25vw, 66px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 1;
    transform: translateY(0);

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


/* =========================================================
   E-COMMERCE EN DORADO
   ========================================================= */

#adv-b02-system-intro .adv-b02-system-intro__accent {
    color: #c1a168;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

#adv-b02-system-intro .adv-b02-system-intro__description {
    max-width: 1080px;

    margin:
        clamp(18px, 2vw, 28px)
        auto
        0;

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

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

    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;

    text-align: center;
    text-wrap: balance;

    opacity: 1;
    transform: translateY(0);

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


/* =========================================================
   ESTADO INICIAL
   ========================================================= */

#adv-b02-system-intro.is-ready
.adv-b02-system-intro__title {
    opacity: 0;
    transform: translateY(110%);
}

#adv-b02-system-intro.is-ready
.adv-b02-system-intro__description {
    opacity: 0;
    transform: translateY(24px);
}

#adv-b02-system-intro.is-ready
.adv-b02-system-intro__line {
    opacity: 0;
    transform: scaleX(0);
}


/* =========================================================
   ESTADO REVELADO
   ========================================================= */

#adv-b02-system-intro.is-ready.is-visible
.adv-b02-system-intro__title {
    opacity: 1;
    transform: translateY(0);
}

#adv-b02-system-intro.is-ready.is-visible
.adv-b02-system-intro__description {
    opacity: 1;
    transform: translateY(0);
}

#adv-b02-system-intro.is-ready.is-visible
.adv-b02-system-intro__line {
    opacity: 1;
    transform: scaleX(1);
}


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

@media (max-width: 1100px) {

    #adv-b02-system-intro
    .adv-b02-system-intro__heading {
        gap: 22px;
    }

    #adv-b02-system-intro
    .adv-b02-system-intro__title {
        font-size: clamp(36px, 5vw, 52px);
    }

    #adv-b02-system-intro
    .adv-b02-system-intro__line {
        flex-basis: 54px;
        width: 54px;
    }
}


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

@media (max-width: 767px) {

    #adv-b02-system-intro {
        padding:
            52px
            22px
            38px;
    }

    #adv-b02-system-intro
    .adv-b02-system-intro__heading {
        display: block;
    }

    #adv-b02-system-intro
    .adv-b02-system-intro__line {
        display: none;
    }

    #adv-b02-system-intro
    .adv-b02-system-intro__title {
        font-size: clamp(36px, 10vw, 52px);
        line-height: 1.04;
        letter-spacing: -0.02em;
        white-space: normal;
    }

    #adv-b02-system-intro
    .adv-b02-system-intro__description {
        max-width: 100%;
        margin-top: 26px;

        font-size: 22px;
        line-height: 1.55;
    }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

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

    #adv-b02-system-intro
    .adv-b02-system-intro__title,

    #adv-b02-system-intro
    .adv-b02-system-intro__description,

    #adv-b02-system-intro
    .adv-b02-system-intro__line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}