/* MO.CA PROJECT CSS v1.0 */

:root {
  --bg: #E4E1D9;
  --text: #000;
  --blue: #3B4B59;
  --red: #B2331E;
  --left: 480px;
  --gap: 64px;
}

.moca-project {
  max-width: 1920px;
  margin: 0 auto;
  padding: 56px 48px 80px;
  background: var(--bg);
  box-sizing: border-box;
}

.project-wrapper {
  display: grid;
  grid-template-columns: var(--left) minmax(0, 900px);
  gap: var(--gap);
  align-items: start;
}

.project-left {
  position: sticky;
  top: 110px;
}

.project-category {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 4px;
}

.project-title {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 10px;
}

.project-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 44px;
}

.project-description {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 44px;
}

.project-softwares {
  display: flex;
  flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 36px;
}

.project-softwares span:not(:last-child)::after {
  content: ' / ';
  margin-right: 6px;
}


/* ==========================================
   BOTONES PROYECTO
========================================== */

.project-link,
.project-navigation a{

    font-family:'IBM Plex Mono', monospace;

    font-size:14px;

    font-weight:700;

}


/* ==========================================
   GALERÍA
========================================== */

.project-gallery {

    display:flex;

    flex-direction:column;

    gap:48px;

}

.gallery-image {
  display: block;
  width: 100%;
  height: auto;
}

.project-navigation {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #000;
  margin-top: 96px;
  padding-top: 32px;
}

/* ==========================================
   RESPONSIVE — TABLET / MOBILE
========================================== */

@media (max-width: 1100px) {

    .project-wrapper{

        grid-template-columns:1fr;

        gap:0;

    }

    .project-left{

        position:relative;

        top:auto;

        width:100%;

    }

    .project-right{

        width:100%;

    }

}

/* ==========================================
   MOBILE — INFORMACIÓN DEL PROYECTO
========================================== */

@media (max-width: 767px) {

    .moca-project{

        padding:32px 20px 56px;

    }

    .project-left{

        width:100%;

        margin:0 0 56px;

    }

    .project-category{

        font-size:28px;

        line-height:1.05;

        margin:0 0 4px;

    }

    .project-title{

        font-size:36px;

        line-height:1;

        margin:0 0 8px;

    }

    .project-subtitle{

        font-size:28px;

        line-height:1.05;

        margin:0 0 32px;

    }

    .project-description{

        font-size:14px;

        line-height:1.7;

        margin-bottom:32px;

    }

    .project-softwares{

        font-size:12px;

        line-height:1.5;

        margin-bottom:28px;

    }

    .project-link{

        font-size:12px;

    }

}

/* ==========================================
   MOBILE — GALERÍA
========================================== */

@media (max-width: 767px) {

    .project-right{

        width:100%;

        margin:0;

    }

    .project-gallery-wrapper{

        width:100%;

        margin:0;

        padding:0;

    }

    .project-gallery{

        display:flex;

        flex-direction:column;

        width:100%;

        gap:32px;

    }

    .gallery-item{

        width:100%;

        margin:0;

    }

    .gallery-image{

        display:block;

        width:100%;

        max-width:none;

        height:auto;

    }

}

html,
body,
#page{
    background:#E4E1D9 !important;
}

/* ==========================================
   ANIMACIONES
========================================== */

.gallery-item{

    opacity:0;

    transform:translateY(32px);

    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);

    will-change:
        opacity,
        transform;

}

.gallery-item.is-visible{

    opacity:1;

    transform:translateY(0);

}

.gallery-image{

    display:block;

    width:100%;

    height:auto;

}