/* =========================================================
   A02 — MANIFIESTO Y VALORES
   ID: adv-a02-principles
   ========================================================= */

#adv-a02-principles {
    --adv-a02-black: #080807;
    --adv-a02-black-soft: #0e0d0b;
    --adv-a02-white: #f3f0e8;
    --adv-a02-gold: #c1a168;
    --adv-a02-text: rgba(243, 240, 232, 0.67);
    --adv-a02-muted: rgba(243, 240, 232, 0.42);
    --adv-a02-line: rgba(193, 161, 104, 0.24);

    position: relative;
    isolation: isolate;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(193, 161, 104, 0.07),
            transparent 32%
        ),
        var(--adv-a02-black);

    color: var(--adv-a02-white);
}


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

#adv-a02-principles
.adv-a02-principles__container {
    position: relative;
    z-index: 2;

    width: min(100%, 1920px);

    margin: 0 auto;
    padding:
        clamp(32px, 4vw, 66px)
        clamp(30px, 5vw, 98px)
        clamp(65px, 6vw, 110px);

    box-sizing: border-box;
}


/* =========================================================
   LÍNEA SUPERIOR
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 21px;

    border-bottom: 1px solid var(--adv-a02-line);

    color: var(--adv-a02-muted);

    font-family: "Tenor Sans", sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


#adv-a02-principles
.adv-a02-principles__topline span:last-child {
    color: var(--adv-a02-gold);
}


/* =========================================================
   GRID DE CINCO VALORES
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 1px;

    margin-top:
        clamp(65px, 7vw, 120px);

    border-top: 1px solid var(--adv-a02-line);
    border-bottom: 1px solid var(--adv-a02-line);

    background: var(--adv-a02-line);
}


#adv-a02-principles
.adv-a02-principles__item {
    position: relative;

    min-width: 0;
    min-height: 350px;

    padding:
        clamp(30px, 2.7vw, 52px)
        clamp(22px, 2vw, 38px);

    box-sizing: border-box;

    background: var(--adv-a02-black);

    transition:
        background-color 350ms ease,
        transform 350ms ease;
}


#adv-a02-principles
.adv-a02-principles__item::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 0;
    height: 1px;

    background: var(--adv-a02-gold);

    transition: width 450ms ease;
}


#adv-a02-principles
.adv-a02-principles__item:hover {
    z-index: 2;

    background: #0d0c0a;

    transform: translateY(-7px);
}


#adv-a02-principles
.adv-a02-principles__item:hover::before {
    width: 100%;
}


/* =========================================================
   CONTENIDO DE CADA VALOR
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__item-number {
    display: block;

    margin-bottom:
        clamp(75px, 6vw, 115px);

    color: var(--adv-a02-gold);

    font-family: "Tenor Sans", sans-serif;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.18em;
}


#adv-a02-principles
.adv-a02-principles__item-title {
    margin: 0;

    color: var(--adv-a02-white);

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

    font-size: clamp(25px, 1.8vw, 37px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
}


#adv-a02-principles
.adv-a02-principles__item-text {
    max-width: 285px;

    margin:
        25px
        0
        0;

    color: var(--adv-a02-text);

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

    font-size: clamp(12px, 0.78vw, 14px);
    font-weight: 300;
    line-height: 1.75;
}


/* =========================================================
   CIERRE INSTITUCIONAL
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__closing {
    display: grid;
    grid-template-columns:
        0.85fr
        1.25fr
        1fr
        minmax(230px, 0.85fr);

    align-items: center;
    gap: clamp(24px, 3vw, 55px);

    margin-top:
        clamp(70px, 7vw, 115px);

    padding-top: 28px;

    border-top: 1px solid var(--adv-a02-line);
}


#adv-a02-principles
.adv-a02-principles__closing-brand {
    color: var(--adv-a02-white);

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

    font-size: clamp(28px, 2.2vw, 43px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
}


#adv-a02-principles
.adv-a02-principles__closing-text {
    color: var(--adv-a02-text);

    font-family: "Manrope", sans-serif;
    font-size: clamp(11px, 0.8vw, 14px);
    font-weight: 300;
    line-height: 1.65;
}


#adv-a02-principles
.adv-a02-principles__closing-location {
    color: var(--adv-a02-muted);

    font-family: "Tenor Sans", sans-serif;
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}


/* =========================================================
   BOTÓN DEL MANIFIESTO
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__manifesto-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;

    padding:
        17px
        0;

    border: 0;
    border-top: 1px solid var(--adv-a02-line);
    border-bottom: 1px solid var(--adv-a02-line);

    background: transparent;
    color: var(--adv-a02-white);

    font-family: "Tenor Sans", sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;

    cursor: pointer;

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


#adv-a02-principles
.adv-a02-principles__manifesto-trigger-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border: 1px solid var(--adv-a02-gold);
    border-radius: 50%;

    color: var(--adv-a02-gold);

    font-size: 15px;

    transition:
        background-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}


#adv-a02-principles
.adv-a02-principles__manifesto-trigger:hover {
    color: var(--adv-a02-gold);
    border-color: rgba(193, 161, 104, 0.55);
}


#adv-a02-principles
.adv-a02-principles__manifesto-trigger:hover
.adv-a02-principles__manifesto-trigger-icon {
    background: var(--adv-a02-gold);
    color: var(--adv-a02-black);

    transform: rotate(-8deg);
}


/* =========================================================
   MODAL
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__modal {
    position: fixed;

    width: min(92vw, 1120px);
    max-width: 1120px;
    max-height: 90svh;

    margin: auto;
    padding: 0;

    overflow: auto;

    border: 1px solid rgba(193, 161, 104, 0.42);
    border-radius: 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(193, 161, 104, 0.1),
            transparent 30%
        ),
        #090908;

    color: var(--adv-a02-white);

    box-shadow:
        0 45px 130px rgba(0, 0, 0, 0.72);

    overscroll-behavior: contain;
}


#adv-a02-principles
.adv-a02-principles__modal:not([open]) {
    display: none;
}


#adv-a02-principles
.adv-a02-principles__modal::backdrop {
    background: rgba(0, 0, 0, 0.82);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


#adv-a02-principles
.adv-a02-principles__modal[open] {
    animation:
        adv-a02-modal-enter
        420ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


#adv-a02-principles
.adv-a02-principles__modal-inner {
    position: relative;

    padding:
        clamp(42px, 5vw, 82px);

    box-sizing: border-box;
}


/* =========================================================
   CIERRE DEL MODAL
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__modal-close {
    position: absolute;
    z-index: 5;

    top: clamp(20px, 2vw, 34px);
    right: clamp(20px, 2vw, 34px);

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--adv-a02-line);
    border-radius: 50%;

    background: transparent;
    color: var(--adv-a02-white);

    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}


#adv-a02-principles
.adv-a02-principles__modal-close:hover {
    background: var(--adv-a02-gold);
    color: var(--adv-a02-black);

    transform: rotate(90deg);
}


/* =========================================================
   CABECERA DEL MODAL
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__modal-header {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.55fr)
        minmax(0, 1.75fr);

    gap: clamp(35px, 5vw, 90px);

    padding-right: 55px;
    padding-bottom:
        clamp(45px, 5vw, 80px);

    border-bottom: 1px solid var(--adv-a02-line);
}


#adv-a02-principles
.adv-a02-principles__modal-eyebrow {
    margin: 8px 0 0;

    color: var(--adv-a02-gold);

    font-family: "Tenor Sans", sans-serif;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


#adv-a02-principles
.adv-a02-principles__modal-title {
    max-width: 760px;

    margin: 0;

    color: var(--adv-a02-white);

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

    font-size: clamp(42px, 4.4vw, 76px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.05em;
}


/* =========================================================
   CONTENIDO DEL MODAL
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__modal-content {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap:
        clamp(40px, 6vw, 100px);

    padding-top:
        clamp(42px, 5vw, 75px);
}


#adv-a02-principles
.adv-a02-principles__modal-content p {
    margin: 0;
    padding:
        24px
        0;

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

    color: var(--adv-a02-text);

    font-family: "Manrope", sans-serif;
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.8;
}


#adv-a02-principles
.adv-a02-principles__modal-content
.adv-a02-principles__modal-statement {
    grid-column: 1 / -1;

    margin-top: 20px;
    padding-top: 38px;

    color: var(--adv-a02-gold);

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

    font-size: clamp(35px, 4vw, 66px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.045em;
}


/* =========================================================
   PIE DEL MODAL
   ========================================================= */

#adv-a02-principles
.adv-a02-principles__modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top:
        clamp(40px, 5vw, 75px);

    padding-top: 26px;

    border-top: 1px solid var(--adv-a02-line);
}


#adv-a02-principles
.adv-a02-principles__modal-download {
    display: inline-flex;
    align-items: center;
    gap: 24px;

    color: var(--adv-a02-white);
    text-decoration: none;

    font-family: "Tenor Sans", sans-serif;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    transition: color 250ms ease;
}


#adv-a02-principles
.adv-a02-principles__modal-download:hover {
    color: var(--adv-a02-gold);
}


#adv-a02-principles
.adv-a02-principles__modal-signature {
    color: var(--adv-a02-muted);

    font-family: "Tenor Sans", sans-serif;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* =========================================================
   ANIMACIÓN DEL MODAL
   ========================================================= */

@keyframes adv-a02-modal-enter {

    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   PANTALLAS INTERMEDIAS
   ========================================================= */

@media (max-width: 1350px) {

    #adv-a02-principles
    .adv-a02-principles__grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }


    #adv-a02-principles
    .adv-a02-principles__item {
        grid-column: span 2;
    }


    #adv-a02-principles
    .adv-a02-principles__item:nth-child(4),
    #adv-a02-principles
    .adv-a02-principles__item:nth-child(5) {
        grid-column: span 3;
    }


    #adv-a02-principles
    .adv-a02-principles__closing {
        grid-template-columns:
            0.8fr
            1.2fr
            1fr;
    }


    #adv-a02-principles
    .adv-a02-principles__manifesto-trigger {
        grid-column: 1 / -1;

        width: min(100%, 440px);
        margin-top: 22px;
    }
}


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

@media (max-width: 900px) {

    #adv-a02-principles
    .adv-a02-principles__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    #adv-a02-principles
    .adv-a02-principles__item,
    #adv-a02-principles
    .adv-a02-principles__item:nth-child(4) {
        grid-column: span 1;
    }


    #adv-a02-principles
    .adv-a02-principles__item:nth-child(5) {
        grid-column: 1 / -1;
    }


    #adv-a02-principles
    .adv-a02-principles__closing {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 34px;
    }


    #adv-a02-principles
    .adv-a02-principles__manifesto-trigger {
        grid-column: auto;

        width: 100%;
        margin-top: 0;
    }


    #adv-a02-principles
    .adv-a02-principles__modal-header {
        grid-template-columns: 1fr;

        gap: 28px;
    }
}


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

@media (max-width: 767px) {

    #adv-a02-principles
    .adv-a02-principles__container {
        padding:
            26px
            22px
            72px;
    }


    #adv-a02-principles
    .adv-a02-principles__topline {
        padding-bottom: 18px;

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


    #adv-a02-principles
    .adv-a02-principles__topline span:last-child {
        display: none;
    }


    #adv-a02-principles
    .adv-a02-principles__grid {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }


    #adv-a02-principles
    .adv-a02-principles__item,
    #adv-a02-principles
    .adv-a02-principles__item:nth-child(4),
    #adv-a02-principles
    .adv-a02-principles__item:nth-child(5) {
        grid-column: span 1;

        min-height: 0;

        padding:
            34px
            20px
            40px;
    }


    #adv-a02-principles
    .adv-a02-principles__item-number {
        margin-bottom: 52px;
    }


    #adv-a02-principles
    .adv-a02-principles__item-title {
        font-size: 34px;
    }


    #adv-a02-principles
    .adv-a02-principles__item-text {
        margin-top: 20px;

        font-size: 13px;
    }


    #adv-a02-principles
    .adv-a02-principles__closing {
        grid-template-columns: 1fr;
        gap: 19px;

        margin-top: 70px;
    }


    #adv-a02-principles
    .adv-a02-principles__closing-brand {
        margin-bottom: 8px;

        font-size: 34px;
    }


    #adv-a02-principles
    .adv-a02-principles__manifesto-trigger {
        margin-top: 24px;
    }


    #adv-a02-principles
    .adv-a02-principles__modal {
        width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
    }


    #adv-a02-principles
    .adv-a02-principles__modal-inner {
        padding:
            72px
            23px
            34px;
    }


    #adv-a02-principles
    .adv-a02-principles__modal-close {
        top: 17px;
        right: 17px;

        width: 40px;
        height: 40px;
    }


    #adv-a02-principles
    .adv-a02-principles__modal-header {
        padding-right: 0;
        padding-bottom: 42px;
    }


    #adv-a02-principles
    .adv-a02-principles__modal-title {
        font-size: clamp(39px, 11vw, 58px);
    }


    #adv-a02-principles
    .adv-a02-principles__modal-content {
        grid-template-columns: 1fr;

        padding-top: 36px;
    }


    #adv-a02-principles
    .adv-a02-principles__modal-content
    .adv-a02-principles__modal-statement {
        grid-column: auto;

        font-size: 38px;
    }


    #adv-a02-principles
    .adv-a02-principles__modal-footer {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 45px;
    }
}


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

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

    #adv-a02-principles *,
    #adv-a02-principles *::before,
    #adv-a02-principles *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}