/* ============================================================
   MEXICO EXPERIENCE
   Premium professional chapter
============================================================ */

.mexicoSection {
    position: relative;
    isolation: isolate;
    padding: 145px 0;
    overflow: clip;
    background:
        linear-gradient(
            120deg,
            #f5efe5 0%,
            #fbfaf7 48%,
            #eee3d2 100%
        );
    color: var(--wine-950);
}


/* ============================================================
   LARGE BACKGROUND WORD
============================================================ */

.mexicoBackgroundWord {
    position: absolute;
    z-index: -4;
    top: 110px;
    right: -3%;
    color: rgba(90, 31, 31, 0.035);
    font-family: var(--font-display);
    font-size: clamp(9rem, 21vw, 23rem);
    font-weight: 700;
    letter-spacing: -0.08em;
    line-height: 0.75;
    white-space: nowrap;
    pointer-events: none;
}


/* ============================================================
   ARCHITECTURAL BACKGROUND
============================================================ */

.mexicoBlueprint {
    position: absolute;
    z-index: -3;
    right: -280px;
    bottom: -170px;
    width: min(70vw, 1050px);
    height: 820px;
    background-image: url("../img/blueprint-floorplan.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.03;
    transform: rotate(-7deg);
    pointer-events: none;
}

.mexicoSection::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(90, 31, 31, 0.016) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 31, 31, 0.016) 1px,
            transparent 1px
        );
    background-size: 64px 64px;
    content: "";
    pointer-events: none;
}

.mexicoSection::after {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 41%;
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(150, 112, 68, 0.18) 14%,
            rgba(150, 112, 68, 0.18) 86%,
            transparent
        );
    content: "";
    pointer-events: none;
}


/* ============================================================
   MAIN GRID
============================================================ */

.mexicoGrid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(340px, 0.78fr)
        minmax(0, 1.22fr);
    gap: clamp(70px, 9vw, 145px);
    align-items: start;
}


/* ============================================================
   STICKY VISUAL
============================================================ */

.mexicoVisualColumn {
    position: sticky;
    top: calc(var(--header-height) + 32px);
    align-self: start;
}

.mexicoVisual {
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: 690px;
    aspect-ratio: 4 / 5.25;
    background: var(--wine-950);
    box-shadow:
        0 38px 90px rgba(43, 13, 13, 0.18);
}

.mexicoVisual img {
    width: 100%;
    height: calc(100% + 80px);
    object-fit: cover;
    object-position: center;
    transform:
        translate3d(
            0,
            var(--mexico-image-y, -40px),
            0
        )
        scale(1.035);
    will-change: transform;
}

.mexicoImageOverlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(43, 13, 13, 0.88) 0%,
            rgba(43, 13, 13, 0.22) 42%,
            rgba(43, 13, 13, 0.05) 75%
        ),
        linear-gradient(
            to right,
            rgba(43, 13, 13, 0.22),
            transparent 45%
        );
}

.mexicoImageNumber {
    position: absolute;
    z-index: 3;
    top: 35px;
    left: 36px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-size: clamp(4rem, 7vw, 7.2rem);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 0.8;
}

.mexicoImageCaption {
    position: absolute;
    z-index: 3;
    right: 36px;
    bottom: 38px;
    left: 36px;
}

.mexicoImageCaption span {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-400);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.mexicoImageCaption strong {
    display: block;
    max-width: 390px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.3vw, 2.4rem);
    font-weight: 600;
    line-height: 1.12;
}

.mexicoImageTechnical {
    position: absolute;
    z-index: 3;
    top: 38px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: rgba(255, 255, 255, 0.48);
    font-family: "Courier New", monospace;
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-align: right;
}


/* ============================================================
   ARCHITECTURAL FRAME
============================================================ */

.mexicoArchitecturalFrame {
    position: absolute;
    z-index: 1;
    top: -24px;
    right: -25px;
    bottom: 48px;
    left: 30px;
    border: 1px solid rgba(150, 112, 68, 0.56);
    pointer-events: none;
}

.mexicoArchitecturalFrame span {
    position: absolute;
    width: 22px;
    height: 22px;
}

.mexicoArchitecturalFrame span:nth-child(1) {
    top: -1px;
    left: -1px;
    border-top: 3px solid var(--bronze-600);
    border-left: 3px solid var(--bronze-600);
}

.mexicoArchitecturalFrame span:nth-child(2) {
    top: -1px;
    right: -1px;
    border-top: 3px solid var(--bronze-600);
    border-right: 3px solid var(--bronze-600);
}

.mexicoArchitecturalFrame span:nth-child(3) {
    bottom: -1px;
    left: -1px;
    border-bottom: 3px solid var(--bronze-600);
    border-left: 3px solid var(--bronze-600);
}

.mexicoArchitecturalFrame span:nth-child(4) {
    right: -1px;
    bottom: -1px;
    border-right: 3px solid var(--bronze-600);
    border-bottom: 3px solid var(--bronze-600);
}

.mexicoImageLocation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 0 30px;
    color: rgba(90, 31, 31, 0.48);
    font-family: "Courier New", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mexicoImageLocation i {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(90, 31, 31, 0.22);
}

.mexicoImageLocation i::before,
.mexicoImageLocation i::after {
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: rgba(90, 31, 31, 0.34);
    content: "";
}

.mexicoImageLocation i::before {
    left: 0;
}

.mexicoImageLocation i::after {
    right: 0;
}


/* ============================================================
   HEADER
============================================================ */

.mexicoHeader {
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(90, 31, 31, 0.17);
}

.mexicoHeaderMeta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.mexicoHeaderMeta .sectionIndex {
    margin: 0;
}

.mexicoContent h2 {
    max-width: 900px;
    margin: 0;
    color: var(--wine-950);
    font-family: var(--font-display);
    font-size: clamp(3.3rem, 5.5vw, 5.8rem);
    font-weight: 600;
    letter-spacing: -0.052em;
    line-height: 0.94;
}

.mexicoContent h2 span {
    display: block;
    margin-top: 10px;
    color: var(--bronze-700);
    font-style: italic;
    font-weight: 500;
}

.mexicoLead {
    max-width: 840px;
    margin: 35px 0 0;
    color: var(--charcoal-600);
    font-size: 1rem;
    line-height: 1.9;
}


/* ============================================================
   METRICS
============================================================ */

.mexicoMetrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 58px 0;
    border-top: 1px solid rgba(90, 31, 31, 0.16);
    border-left: 1px solid rgba(90, 31, 31, 0.16);
}

.mexicoMetric {
    min-height: 185px;
    padding: 29px;
    border-right: 1px solid rgba(90, 31, 31, 0.16);
    border-bottom: 1px solid rgba(90, 31, 31, 0.16);
    background: rgba(255, 255, 255, 0.38);
}

.mexicoMetric strong {
    display: block;
    color: var(--wine-800);
    font-family: var(--font-display);
    font-size: clamp(3rem, 4.6vw, 4.8rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.mexicoMetric span {
    display: block;
    max-width: 170px;
    margin-top: 18px;
    color: var(--charcoal-500);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
}


/* ============================================================
   EXPERIENCE LIST
============================================================ */

.mexicoExperienceList {
    border-top: 1px solid rgba(90, 31, 31, 0.17);
}

.mexicoExperienceItem {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 70px;
    gap: 26px;
    padding: 42px 0;
    border-bottom: 1px solid rgba(90, 31, 31, 0.15);
    transition:
        padding var(--transition-base),
        background var(--transition-base);
}

.mexicoExperienceItem:hover {
    padding-right: 22px;
    padding-left: 22px;
    background: rgba(255, 255, 255, 0.58);
}

.mexicoExperienceNumber {
    color: var(--bronze-600);
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.mexicoExperienceLabel {
    display: block;
    margin-bottom: 8px;
    color: var(--bronze-600);
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mexicoExperienceBody h3 {
    margin: 0 0 14px;
    color: var(--wine-950);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 2.8vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.03;
}

.mexicoExperienceBody p {
    max-width: 760px;
    margin: 0;
    color: var(--charcoal-500);
    font-size: 0.9rem;
    line-height: 1.75;
}

.mexicoExperienceCode {
    color: rgba(90, 31, 31, 0.32);
    font-family: "Courier New", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    text-align: right;
}


/* ============================================================
   SEISMIC FEATURE
============================================================ */

.mexicoSeismic {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 46px;
    margin-top: 70px;
    padding: 50px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            var(--wine-950),
            var(--wine-800)
        );
    color: var(--white);
    box-shadow: 0 28px 65px rgba(43, 13, 13, 0.14);
}

.mexicoSeismicYear {
    position: relative;
    z-index: 2;
    padding-right: 30px;
    border-right: 1px solid rgba(201, 166, 107, 0.28);
}

.mexicoSeismicYear strong {
    display: block;
    color: var(--gold-400);
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.mexicoSeismicYear span {
    display: block;
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mexicoSeismicContent {
    position: relative;
    z-index: 2;
}

.mexicoSeismicLabel {
    display: block;
    margin-bottom: 12px;
    color: var(--gold-400);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mexicoSeismic h3 {
    max-width: 630px;
    margin: 0 0 19px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.4vw, 3.7rem);
    font-weight: 600;
    line-height: 1.02;
}

.mexicoSeismic p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.9rem;
    line-height: 1.8;
}

.mexicoSeismicDrawing {
    position: absolute;
    right: -35px;
    bottom: -25px;
    width: 300px;
    opacity: 0.11;
}

.mexicoSeismicDrawing svg {
    width: 100%;
    stroke: var(--gold-400);
    stroke-width: 1;
}


/* ============================================================
   CERTIFICATION
============================================================ */

.mexicoCertification {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 45px;
    align-items: center;
    margin-top: 32px;
    padding: 34px 38px;
    border: 1px solid rgba(90, 31, 31, 0.17);
    background: rgba(255, 255, 255, 0.46);
}

.mexicoCertification > div {
    padding-right: 28px;
    border-right: 1px solid rgba(90, 31, 31, 0.16);
}

.mexicoCertification span {
    display: block;
    color: var(--bronze-600);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mexicoCertification strong {
    display: block;
    margin-top: 5px;
    color: var(--wine-800);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
}

.mexicoCertification p {
    margin: 0;
    color: var(--charcoal-500);
    font-size: 0.9rem;
    line-height: 1.75;
}


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

.mexicoFooter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 58px;
    padding-top: 28px;
    border-top: 1px solid rgba(90, 31, 31, 0.17);
    color: rgba(90, 31, 31, 0.48);
    font-family: "Courier New", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mexicoFooter i {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(90, 31, 31, 0.22);
}

.mexicoFooter i::before,
.mexicoFooter i::after {
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: rgba(90, 31, 31, 0.34);
    content: "";
}

.mexicoFooter i::before {
    left: 0;
}

.mexicoFooter i::after {
    right: 0;
}

.mexicoFooter strong {
    color: var(--wine-800);
    font-weight: 600;
}


/* ============================================================
   REVEAL
============================================================ */

.mexicoReveal {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity 850ms ease,
        transform 1050ms cubic-bezier(.18, .68, .25, 1);
}

.mexicoReveal.isVisible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1050px) {

    .mexicoGrid {
        grid-template-columns:
            minmax(300px, 0.72fr)
            minmax(0, 1.28fr);
        gap: 65px;
    }

    .mexicoMetrics {
        grid-template-columns: 1fr;
    }

    .mexicoMetric {
        min-height: auto;
    }

}


@media (max-width: 850px) {

    .mexicoGrid {
        grid-template-columns: 1fr;
        gap: 90px;
    }

    .mexicoVisualColumn {
        position: static;
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .mexicoVisual {
        min-height: auto;
        aspect-ratio: 4 / 4.4;
    }

    .mexicoSection::after {
        display: none;
    }

    .mexicoBackgroundWord {
        top: 50px;
    }

}


@media (max-width: 620px) {

    .mexicoSection {
        padding: 95px 0;
    }

    .mexicoVisual {
        aspect-ratio: 4 / 5;
    }

    .mexicoHeaderMeta {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .mexicoExperienceItem {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 15px;
        padding: 34px 0;
    }

    .mexicoExperienceCode {
        display: none;
    }

    .mexicoExperienceItem:hover {
        padding-right: 12px;
        padding-left: 12px;
    }

    .mexicoSeismic {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 38px 27px;
    }

    .mexicoSeismicYear {
        padding: 0 0 25px;
        border-right: 0;
        border-bottom: 1px solid rgba(201, 166, 107, 0.28);
    }

    .mexicoCertification {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 25px;
    }

    .mexicoCertification > div {
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(90, 31, 31, 0.16);
    }

    .mexicoFooter {
        align-items: flex-start;
        flex-direction: column;
    }

    .mexicoFooter i {
        width: 100%;
        flex: none;
    }

    .mexicoImageTechnical {
        display: none;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .mexicoVisual img {
        transform: scale(1.035);
    }

    .mexicoReveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}