/* =========================================================
   ZBITVERSE
   PROJECTS PAGE
   projects-page.css

   Concept:

   CAPACIDAD
       ↓
   PROYECTO
       ↓
   IMPACTO
       ↓
   ECOSISTEMA

   Projects are represented as nodes
   inside the ZBITVERSE ecosystem.
========================================================= */


/* =========================================================
   01. PAGE FOUNDATION
========================================================= */

.projects-hero,
.projects-list,
.projects-final {

    position: relative;

    overflow: hidden;

}


/* =========================================================
   02. NAVBAR
========================================================= */

.navbar {

    position: relative;

    z-index: 100;

    width: 100%;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .08);

    background:
        rgba(3, 7, 18, .82);

    backdrop-filter:
        blur(16px);

}


.navbar .container {

    width:
        min(
            calc(100% - 3rem),
            1200px
        );

    margin-inline: auto;

}


.navbar .nav {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

}


.navbar .logo {

    flex-shrink: 0;

    color: #f8fafc;

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: .16rem;

    text-decoration: none;

}


.navbar .nav-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    margin: 0;

    padding: 0;

    list-style: none;

}


.navbar .nav-menu li {

    margin: 0;

    padding: 0;

}


.navbar .nav-menu a {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding: .4rem 0;

    color:
        rgba(226, 232, 240, .72);

    font-size: .82rem;

    font-weight: 500;

    text-decoration: none;

    transition:
        color .25s ease;

}


.navbar .nav-menu a::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    height: 1px;

    background:
        #2563eb;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .25s ease;

}


.navbar .nav-menu a:hover,
.navbar .nav-menu a.active {

    color: #ffffff;

}


.navbar .nav-menu a:hover::after,
.navbar .nav-menu a.active::after {

    transform:
        scaleX(1);

}


.navbar .btn {

    flex-shrink: 0;

}


.navbar .menu-toggle {

    display: none;

}


/* =========================================================
   03. PROJECTS HERO
========================================================= */

.projects-hero {

    min-height:
        calc(
            100vh - 78px
        );

    display: flex;

    align-items: center;

    padding:
        7rem 0 8rem;

    background:

        radial-gradient(
            circle at 78% 48%,
            rgba(37, 99, 235, .12),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 85%,
            rgba(37, 99, 235, .05),
            transparent 28%
        );

}


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

.projects-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .65;

    background-image:

        linear-gradient(
            rgba(37, 99, 235, .045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37, 99, 235, .045) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        radial-gradient(
            circle at 75% 50%,
            black,
            transparent 70%
        );

}


/* =========================================================
   PROJECT NETWORK
========================================================= */

.projects-hero::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 8%;

    width: 430px;

    height: 430px;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(37, 99, 235, .14);

    border-radius: 50%;

    box-shadow:

        0 0 0 55px
        rgba(37, 99, 235, .025),

        0 0 0 110px
        rgba(37, 99, 235, .018),

        0 0 80px
        rgba(37, 99, 235, .08);

    pointer-events: none;

}


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

.projects-hero .container {

    position: relative;

    z-index: 2;

}


/* =========================================================
   PAGE LABEL
========================================================= */

.projects-hero .page-label {

    display: inline-flex;

    align-items: center;

    gap: .75rem;

    margin-bottom: 2.5rem;

    color:
        #2563eb;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .2rem;

    text-transform: uppercase;

}


.projects-hero .page-label span {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #2563eb;

    box-shadow:
        0 0 14px
        rgba(37, 99, 235, .9);

}


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

.projects-hero h1 {

    max-width:
        950px;

    margin: 0;

    color:
        #f8fafc;

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

    font-weight: 700;

    line-height: .92;

    letter-spacing:
        -.06em;

}


.projects-hero h1 span {

    display: block;

    color:
        #2563eb;

}


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

.projects-hero p {

    max-width:
        720px;

    margin:
        2.5rem 0 0;

    color:
        #b7c1d1;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height:
        1.8;

}


/* =========================================================
   04. PROJECT LIST
========================================================= */

.projects-list {

    border-top:
        1px solid
        rgba(148, 163, 184, .08);

    background:
        linear-gradient(
            180deg,
            rgba(3, 8, 20, .45),
            rgba(4, 9, 22, .85)
        );

}


/* =========================================================
   PROJECT
========================================================= */

.project {

    position: relative;

    display: grid;

    grid-template-columns:
        120px
        minmax(0, 1fr);

    gap:
        4rem;

    min-height:
        430px;

    padding:
        6rem 0;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .10);

}


/* =========================================================
   PROJECT NUMBER
========================================================= */

.project-number {

    position: relative;

    color:
        #2563eb;

    font-size:
        .75rem;

    font-weight:
        700;

    letter-spacing:
        .12rem;

}


.project-number::after {

    content: "";

    position: absolute;

    top: 1.6rem;

    left: 0;

    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            transparent
        );

}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.project-content {

    position: relative;

    max-width:
        950px;

}


/* =========================================================
   CATEGORY
========================================================= */

.project-content > span {

    display: inline-block;

    margin-bottom:
        1.5rem;

    color:
        rgba(96, 165, 250, .9);

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .18rem;

}


/* =========================================================
   PROJECT TITLE
========================================================= */

.project-content h2 {

    max-width:
        900px;

    margin:
        0;

    color:
        #ffffff;

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

    font-weight:
        700;

    line-height:
        .96;

    letter-spacing:
        -.05em;

}


/* =========================================================
   PROJECT DESCRIPTION
========================================================= */

.project-content p {

    max-width:
        680px;

    margin:
        2rem 0 2rem;

    color:
        #aeb8c7;

    font-size:
        1.05rem;

    line-height:
        1.8;

}


/* =========================================================
   PROJECT LINK
========================================================= */

.project-content a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .8rem;

    color:
        #60a5fa;

    font-size:
        .8rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .25s ease,
        gap .25s ease;

}


.project-content a:hover {

    color:
        #ffffff;

    gap:
        1.2rem;

}


/* =========================================================
   PROJECT NODE
========================================================= */

.project-content::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 5%;

    width: 150px;

    height: 150px;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(37, 99, 235, .15);

    border-radius: 50%;

    box-shadow:

        0 0 0 28px
        rgba(37, 99, 235, .025),

        0 0 0 55px
        rgba(37, 99, 235, .015);

    pointer-events:
        none;

}


/* =========================================================
   PROJECT NUMBER DIFFERENT POSITIONING
========================================================= */

.project:nth-child(2)
.project-content::after {

    border-color:
        rgba(96, 165, 250, .16);

}


.project:nth-child(3)
.project-content::after {

    border-color:
        rgba(37, 99, 235, .20);

}


/* =========================================================
   05. FINAL / ENGINE ZERO
========================================================= */

.projects-final {

    padding:
        10rem 0;

    background:

        radial-gradient(
            circle at 50% 40%,
            rgba(37, 99, 235, .09),
            transparent 42%
        );

}


.projects-final .container > div {

    position:
        relative;

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;

}


/* =========================================================
   ENGINE ZERO LABEL
========================================================= */

.projects-final .container > div > span {

    display:
        block;

    margin-bottom:
        1.5rem;

    color:
        #2563eb;

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .2rem;

}


/* =========================================================
   FINAL TITLE
========================================================= */

.projects-final h2 {

    margin:
        0;

    color:
        #ffffff;

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

    line-height:
        .98;

    letter-spacing:
        -.055em;

}


.projects-final h2::after {

    content:
        "Conectamos capacidades para construir sistemas más grandes.";

    display:
        block;

    max-width:
        600px;

    margin:
        1.5rem auto 0;

    color:
        rgba(96, 165, 250, .85);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    font-weight:
        400;

    line-height:
        1.7;

    letter-spacing:
        0;

}


/* =========================================================
   FINAL DESCRIPTION

   Hidden visually because the idea is reinforced
   by the architectural statement above.
========================================================= */

.projects-final p {

    max-width:
        650px;

    margin:
        2rem auto 2.5rem;

    color:
        #aeb8c7;

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   FINAL BUTTON
========================================================= */

.projects-final .btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        220px;

}


/* =========================================================
   06. SCROLL REVEAL
========================================================= */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity .8s ease,

        transform
        .8s cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}


[data-reveal].is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


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

[data-delay="1"] {

    transition-delay:
        .12s;

}


[data-delay="2"] {

    transition-delay:
        .24s;

}


[data-delay="3"] {

    transition-delay:
        .36s;

}


/* =========================================================
   07. TABLET
========================================================= */

@media (max-width: 992px) {


    .navbar .nav {

        gap:
            1rem;

    }


    .navbar .nav-menu {

        gap:
            1.25rem;

    }


    .navbar .nav-menu a {

        font-size:
            .75rem;

    }


    .projects-hero {

        padding:
            6rem 0 7rem;

    }


    .projects-hero::after {

        right:
            -100px;

        opacity:
            .45;

    }


    .project {

        grid-template-columns:
            80px
            minmax(0, 1fr);

        gap:
            2rem;

    }


    .project-content::after {

        right:
            -30px;

        opacity:
            .45;

    }

}


/* =========================================================
   08. MOBILE
========================================================= */

@media (max-width: 700px) {


    .navbar .container {

        width:
            min(
                calc(100% - 2rem),
                1200px
            );

    }


    .navbar .nav {

        min-height:
            70px;

    }


    .navbar .nav-menu {

        display:
            none;

    }


    .navbar .nav > .btn {

        display:
            none;

    }


    .navbar .menu-toggle {

        width:
            42px;

        height:
            42px;

        display:
            inline-flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid
            rgba(148,163,184,.2);

        border-radius:
            10px;

        background:
            transparent;

        color:
            #ffffff;

        cursor:
            pointer;

    }


    .navbar .menu-toggle span {

        display:
            block;

        width:
            17px;

        height:
            1px;

        background:
            #ffffff;

    }


    .projects-hero {

        min-height:
            auto;

        padding:
            5rem 0 6rem;

    }


    .projects-hero h1 {

        font-size:
            clamp(
                3.2rem,
                14vw,
                5rem
            );

    }


    .projects-hero p {

        margin-top:
            1.75rem;

        font-size:
            1rem;

    }


    .projects-hero::after {

        top:
            65%;

        right:
            -220px;

        width:
            360px;

        height:
            360px;

    }


    .projects-list {

        padding:
            0 0;

    }


    .project {

        display:
            block;

        min-height:
            auto;

        padding:
            4rem 0 5rem;

    }


    .project-number {

        margin-bottom:
            2rem;

    }


    .project-content > span {

        margin-bottom:
            1.2rem;

    }


    .project-content h2 {

        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            );

    }


    .project-content p {

        margin-top:
            1.5rem;

        font-size:
            .95rem;

    }


    .project-content::after {

        top:
            80%;

        right:
            -100px;

        width:
            130px;

        height:
            130px;

        opacity:
            .25;

    }


    .projects-final {

        padding:
            6rem 0 7rem;

    }


    .projects-final h2 {

        font-size:
            clamp(
                2.8rem,
                12vw,
                4rem
            );

    }


    .projects-final h2::after {

        font-size:
            1rem;

    }

}


/* =========================================================
   09. ACCESSIBILITY
========================================================= */

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


    [data-reveal] {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }

}
/* =========================================================
   ZBITVERSE
   PROJECTS — SPACING / CONTAINER CORRECTION
========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR PRINCIPAL
--------------------------------------------------------- */

.projects-hero .container,
.projects-list .container,
.projects-final .container {

    width: min(
        calc(100% - 4rem),
        1280px
    );

    margin-left: auto;
    margin-right: auto;

}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.projects-hero {

    min-height: calc(100vh - 78px);

    padding-top: 8rem;
    padding-bottom: 8rem;

}


/* ---------------------------------------------------------
   CONTENIDO DEL HERO
--------------------------------------------------------- */

.projects-hero .container {

    padding-left: 2rem;
    padding-right: 2rem;

}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.projects-hero .page-label {

    margin-bottom: 3rem;

}


/* ---------------------------------------------------------
   TITULAR
--------------------------------------------------------- */

.projects-hero h1 {

    max-width: 900px;

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

    line-height: .94;

}


/* ---------------------------------------------------------
   TEXTO
--------------------------------------------------------- */

.projects-hero p {

    max-width: 700px;

    margin-top: 2.5rem;

}


/* ---------------------------------------------------------
   LISTA DE PROYECTOS
--------------------------------------------------------- */

.projects-list .container {

    padding-left: 2rem;
    padding-right: 2rem;

}


/* ---------------------------------------------------------
   PROYECTOS
--------------------------------------------------------- */

.project {

    grid-template-columns:
        100px
        minmax(0, 1fr);

    gap: 3rem;

    padding-top: 7rem;
    padding-bottom: 7rem;

}


/* ---------------------------------------------------------
   CONTENIDO DEL PROYECTO
--------------------------------------------------------- */

.project-content {

    max-width: 900px;

}


/* ---------------------------------------------------------
   TÍTULOS DE PROYECTOS
--------------------------------------------------------- */

.project-content h2 {

    max-width: 800px;

}


/* ---------------------------------------------------------
   DESCRIPCIÓN
--------------------------------------------------------- */

.project-content p {

    max-width: 650px;

}


/* ---------------------------------------------------------
   FINAL
--------------------------------------------------------- */

.projects-final .container {

    padding-left: 2rem;
    padding-right: 2rem;

}


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

@media (max-width: 992px) {

    .projects-hero .container,
    .projects-list .container,
    .projects-final .container {

        width: min(
            calc(100% - 3rem),
            1100px
        );

    }

    .projects-hero .container,
    .projects-list .container,
    .projects-final .container {

        padding-left: 1rem;
        padding-right: 1rem;

    }

}


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

@media (max-width: 700px) {

    .projects-hero .container,
    .projects-list .container,
    .projects-final .container {

        width:
            calc(100% - 2rem);

        padding-left: 0;
        padding-right: 0;

    }


    .projects-hero {

        padding-top: 5rem;
        padding-bottom: 5rem;

    }


    .projects-hero h1 {

        font-size:
            clamp(
                3.2rem,
                13vw,
                5rem
            );

    }


    .project {

        padding-top: 4rem;
        padding-bottom: 4rem;

    }

}