/* =========================================================
   GAMESALONE18 UNIVERSE
   COLABORACIONES
   ESTILOS EXCLUSIVOS DE LA PÁGINA
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.collab-body {

    --collab-bg: #050505;
    --collab-bg-soft: #090909;
    --collab-card: #0b0b0b;

    --collab-white: #f5f5f5;
    --collab-text: #d2d2d2;
    --collab-muted: #888;

    --collab-green: #00ff9c;

    --collab-border:
        rgba(255, 255, 255, .09);

    --collab-container:
        1180px;

    margin: 0;

    padding: 0;

    background:
        var(--collab-bg);

    color:
        var(--collab-white);

    overflow-x: hidden;

}


/* =========================================================
   IMPORTANTE
   EL HEADER GLOBAL CONSERVA SU PROPIO LAYOUT
========================================================= */

.collab-body #header {

    position: relative;

    z-index: 100000;

}


/* =========================================================
   FONDO
========================================================= */

.collab-body .collab-background {

    position: fixed;

    inset: 0;

    z-index: -3;

    background:
        url("/home/img/bg-masthead.jpg")
        center center / cover
        no-repeat;

    opacity: .12;

    filter:
        blur(2px);

    transform:
        scale(1.03);

    pointer-events: none;

}


.collab-body .collab-overlay {

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .94) 45%,
            rgba(0, 0, 0, .98) 100%
        );

}


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

.collab-body .collab-container {

    width:
        min(
            calc(100% - 40px),
            var(--collab-container)
        );

    margin:
        0 auto;

}


/* =========================================================
   HERO
========================================================= */

.collab-body .collab-hero {

    min-height:
        560px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        120px 20px 80px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);

}


.collab-body .collab-hero-inner {

    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;

}


.collab-body .collab-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 15px;

    border:
        1px solid
        rgba(0, 255, 156, .20);

    border-radius:
        50px;

    background:
        rgba(0, 255, 156, .045);

    color:
        var(--collab-green);

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.collab-body .collab-hero h1 {

    margin:
        28px 0 22px;

    font-size:
        clamp(3rem, 7vw, 6rem);

    line-height:
        .95;

    letter-spacing:
        -4px;

    font-weight:
        900;

    color:
        #fff;

}


.collab-body .collab-hero h1 span {

    display:
        block;

    color:
        var(--collab-green);

}


.collab-body .collab-hero p {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        #bdbdbd;

    font-size:
        1.08rem;

    line-height:
        1.8;

}


.collab-body .collab-divider {

    width:
        65px;

    height:
        2px;

    margin:
        30px auto 18px;

    background:
        var(--collab-green);

}


.collab-body .collab-hero small {

    color:
        #666;

    font-size:
        .78rem;

    letter-spacing:
        1px;

}


/* =========================================================
   INTRO
========================================================= */

.collab-body .collab-intro {

    padding:
        100px 0;

    background:
        rgba(0, 0, 0, .25);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);

}


.collab-body .collab-intro-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        90px;

    align-items:
        center;

}


.collab-body .collab-label {

    display:
        inline-block;

    margin-bottom:
        17px;

    color:
        var(--collab-green);

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        2px;

}


.collab-body .collab-intro-title h2 {

    margin:
        0;

    max-width:
        560px;

    font-size:
        clamp(2.4rem, 5vw, 4rem);

    line-height:
        1.05;

    letter-spacing:
        -2px;

}


.collab-body .collab-intro-title h2 span {

    display:
        block;

    color:
        #555;

}


.collab-body .collab-intro-text {

    border-left:
        1px solid
        rgba(0, 255, 156, .25);

    padding-left:
        30px;

}


.collab-body .collab-intro-text p {

    margin:
        0 0 20px;

    color:
        #999;

    font-size:
        .98rem;

    line-height:
        1.85;

}


.collab-body .collab-intro-text p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   WORK
========================================================= */

.collab-body .collab-work {

    padding:
        100px 0 0;

}


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

.collab-body .collab-main-card {

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

    min-height:
        590px;

    overflow:
        hidden;

    background:
        #090909;

    border:
        1px solid
        var(--collab-border);

    border-radius:
        18px;

}


.collab-body .collab-main-image {

    position:
        relative;

    min-height:
        590px;

    overflow:
        hidden;

}


.collab-body .collab-main-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .7s ease;

}


.collab-body .collab-main-card:hover
.collab-main-image img {

    transform:
        scale(1.035);

}


.collab-body .collab-image-dark {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .05),
            rgba(0, 0, 0, .65)
        );

}


.collab-body .collab-number {

    position:
        absolute;

    top:
        22px;

    left:
        22px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .65);

    color:
        #fff;

    font-size:
        .75rem;

    font-weight:
        800;

}


.collab-body .collab-official {

    position:
        absolute;

    left:
        22px;

    bottom:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(0, 255, 156, .22);

    border-radius:
        50px;

    background:
        rgba(0, 0, 0, .75);

    color:
        #ddd;

    font-size:
        .6rem;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.collab-body .collab-official i {

    color:
        var(--collab-green);

    font-size:
        .4rem;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.collab-body .collab-main-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        55px;

}


.collab-body .collab-main-content h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(2.5rem, 5vw, 4.2rem);

    line-height:
        1;

    letter-spacing:
        -2px;

}


.collab-body .collab-main-content p {

    margin:
        0 0 18px;

    color:
        #888;

    line-height:
        1.8;

    font-size:
        .95rem;

}


.collab-body .collab-main-content .collab-lead {

    color:
        #d0d0d0;

    font-size:
        1.03rem;

}


/* =========================================================
   BUTTONS
========================================================= */

.collab-body .collab-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        15px;

}


.collab-body .collab-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        44px;

    padding:
        0 18px;

    border-radius:
        50px;

    font-size:
        .78rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .25s ease;

}


.collab-body .collab-btn:hover {

    transform:
        translateY(-2px);

}


.collab-body .collab-btn-primary {

    background:
        var(--collab-green);

    color:
        #000;

}


.collab-body .collab-btn-primary:hover {

    background:
        #fff;

    color:
        #000;

}


.collab-body .collab-btn-secondary {

    border:
        1px solid
        rgba(255, 255, 255, .15);

    background:
        rgba(255, 255, 255, .03);

    color:
        #fff;

}


.collab-body .collab-btn-secondary:hover {

    border-color:
        rgba(255, 255, 255, .35);

}


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

.collab-body .collab-feature {

    display:
        grid;

    grid-template-columns:
        1.65fr .8fr;

    min-height:
        340px;

    margin:
        25px 0 70px;

    overflow:
        hidden;

    background:
        #090909;

    border:
        1px solid
        var(--collab-border);

    border-radius:
        18px;

}


.collab-body .collab-feature-image {

    min-height:
        340px;

    overflow:
        hidden;

}


.collab-body .collab-feature-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .7s ease;

}


.collab-body .collab-feature:hover
.collab-feature-image img {

    transform:
        scale(1.035);

}


.collab-body .collab-feature-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        45px;

}


.collab-body .collab-feature-content h3 {

    margin:
        8px 0 15px;

    font-size:
        2.7rem;

    line-height:
        1;

}


.collab-body .collab-feature-content p {

    margin:
        0;

    color:
        #888;

    line-height:
        1.8;

}


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

.collab-body .collab-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;

}


/* =========================================================
   CARDS
========================================================= */

.collab-body .collab-card {

    overflow:
        hidden;

    background:
        #090909;

    border:
        1px solid
        var(--collab-border);

    border-radius:
        18px;

    transition:
        border-color .3s ease,
        transform .3s ease;

}


.collab-body .collab-card:hover {

    border-color:
        rgba(0, 255, 156, .22);

    transform:
        translateY(-4px);

}


.collab-body .collab-card-image {

    position:
        relative;

    height:
        300px;

    overflow:
        hidden;

}


.collab-body .collab-card-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .7s ease;

}


.collab-body .collab-card:hover
.collab-card-image img {

    transform:
        scale(1.04);

}


.collab-body .collab-card-image > span {

    position:
        absolute;

    top:
        18px;

    left:
        18px;

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .7);

    color:
        #fff;

    font-size:
        .72rem;

    font-weight:
        800;

}


.collab-body .collab-card-content {

    padding:
        34px;

}


.collab-body .collab-card-content h2 {

    margin:
        0 0 18px;

    font-size:
        2rem;

    line-height:
        1.05;

}


.collab-body .collab-card-content h2 span {

    display:
        block;

    color:
        #666;

}


.collab-body .collab-card-content p {

    margin:
        0 0 16px;

    color:
        #888;

    line-height:
        1.8;

    font-size:
        .92rem;

}


.collab-body .collab-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        5px;

    color:
        #fff;

    font-size:
        .8rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .25s ease;

}


.collab-body .collab-link:hover {

    color:
        var(--collab-green);

    gap:
        12px;

}


/* =========================================================
   VALUE
========================================================= */

.collab-body .collab-value {

    margin-top:
        110px;

    padding:
        100px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, .06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);

}


.collab-body .collab-value-header {

    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.collab-body .collab-value-header h2 {

    margin:
        0 0 20px;

    font-size:
        clamp(2.4rem, 5vw, 4rem);

    line-height:
        1;

    letter-spacing:
        -2px;

}


.collab-body .collab-value-header h2 span {

    display:
        block;

    color:
        #555;

}


.collab-body .collab-value-header p {

    max-width:
        620px;

    margin:
        0 auto;

    color:
        #888;

    line-height:
        1.8;

}


.collab-body .collab-value-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

}


.collab-body .collab-value-card {

    min-height:
        250px;

    padding:
        28px;

    background:
        #090909;

    border:
        1px solid
        var(--collab-border);

    border-radius:
        15px;

    transition:
        .3s ease;

}


.collab-body .collab-value-card:hover {

    border-color:
        rgba(0, 255, 156, .25);

    transform:
        translateY(-4px);

}


.collab-body .collab-value-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(0, 255, 156, .20);

    border-radius:
        12px;

    background:
        rgba(0, 255, 156, .05);

    color:
        var(--collab-green);

}


.collab-body .collab-value-card small {

    color:
        #444;

    font-size:
        .65rem;

    font-weight:
        900;

}


.collab-body .collab-value-card h3 {

    margin:
        9px 0 12px;

    font-size:
        1.1rem;

}


.collab-body .collab-value-card p {

    margin:
        0;

    color:
        #777;

    font-size:
        .87rem;

    line-height:
        1.7;

}


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

.collab-body .collab-cta {

    max-width:
        850px;

    margin:
        0 auto;

    padding:
        120px 20px;

    text-align:
        center;

}


.collab-body .collab-cta h2 {

    margin:
        10px 0 22px;

    font-size:
        clamp(3rem, 7vw, 5.5rem);

    line-height:
        .95;

    letter-spacing:
        -3px;

}


.collab-body .collab-cta h2 span {

    display:
        block;

    color:
        var(--collab-green);

}


.collab-body .collab-cta p {

    max-width:
        620px;

    margin:
        0 auto 30px;

    color:
        #888;

    line-height:
        1.8;

}


.collab-body .collab-cta-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 25px;

    border-radius:
        50px;

    background:
        var(--collab-green);

    color:
        #000;

    font-size:
        .82rem;

    font-weight:
        900;

    text-decoration:
        none;

    transition:
        .25s ease;

}


.collab-body .collab-cta-btn:hover {

    background:
        #fff;

    color:
        #000;

    transform:
        translateY(-3px);

}


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

@media (max-width: 1000px) {

    .collab-body .collab-value-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 850px) {

    .collab-body .collab-hero {

        min-height:
            500px;

    }


    .collab-body .collab-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .collab-body .collab-main-card {

        grid-template-columns:
            1fr;

    }


    .collab-body .collab-main-image {

        min-height:
            430px;

    }


    .collab-body .collab-feature {

        grid-template-columns:
            1fr;

    }


    .collab-body .collab-feature-image {

        min-height:
            300px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .collab-body .collab-container {

        width:
            calc(100% - 28px);

    }


    .collab-body .collab-hero {

        min-height:
            470px;

        padding:
            105px 15px 60px;

    }


    .collab-body .collab-hero h1 {

        font-size:
            3rem;

        letter-spacing:
            -2px;

    }


    .collab-body .collab-hero p {

        font-size:
            .92rem;

    }


    .collab-body .collab-intro {

        padding:
            70px 0;

    }


    .collab-body .collab-intro-title h2 {

        font-size:
            2.5rem;

    }


    .collab-body .collab-intro-text {

        padding-left:
            20px;

    }


    .collab-body .collab-work {

        padding-top:
            70px;

    }


    .collab-body .collab-main-image {

        min-height:
            300px;

    }


    .collab-body .collab-main-content {

        padding:
            32px 25px;

    }


    .collab-body .collab-main-content h2 {

        font-size:
            2.6rem;

    }


    .collab-body .collab-buttons {

        flex-direction:
            column;

    }


    .collab-body .collab-btn {

        width:
            100%;

    }


    .collab-body .collab-feature-image {

        min-height:
            230px;

    }


    .collab-body .collab-feature-content {

        padding:
            30px 25px;

    }


    .collab-body .collab-feature-content h3 {

        font-size:
            2.2rem;

    }


    .collab-body .collab-grid {

        grid-template-columns:
            1fr;

    }


    .collab-body .collab-card-image {

        height:
            240px;

    }


    .collab-body .collab-card-content {

        padding:
            28px 23px;

    }


    .collab-body .collab-card-content h2 {

        font-size:
            1.9rem;

    }


    .collab-body .collab-value {

        margin-top:
            75px;

        padding:
            75px 0;

    }


    .collab-body .collab-value-grid {

        grid-template-columns:
            1fr;

    }


    .collab-body .collab-cta {

        padding:
            90px 15px;

    }


    .collab-body .collab-cta h2 {

        font-size:
            3.2rem;

    }


    .collab-body .collab-cta-btn {

        width:
            100%;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 400px) {

    .collab-body .collab-hero h1 {

        font-size:
            2.6rem;

    }


    .collab-body .collab-intro-title h2 {

        font-size:
            2.2rem;

    }


    .collab-body .collab-main-content h2 {

        font-size:
            2.3rem;

    }


    .collab-body .collab-cta h2 {

        font-size:
            2.8rem;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .collab-body .collab-page * {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

    }

}