:root {
  --negro: #000;
  --blanco: #fff;
  --gris: #808080;
  --mono: 'Geist Mono', ui-monospace, 'Courier New', monospace;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --titulo: 'Space Grotesk', 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --columnas: 4;
  --sep-col: 0em;
}
* { box-sizing: border-box; }
html { background: var(--blanco); height: 100%; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; min-height: 100%; color: var(--negro); text-transform: lowercase;
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 125%;
}
a { color: inherit; }
img, video { max-width: 100%; }
h1, h2, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; text-transform: inherit; margin: 0; }
:focus-visible { outline: 1px dashed currentColor; outline-offset: 3px; }
.salto { position: fixed; left: 10px; top: -60px; z-index: 2000; background: var(--negro); color: var(--blanco); font-family: var(--mono); font-size: 12px; padding: 8px 12px; }
.salto:focus { top: 10px; }

.w-layout-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 10px; row-gap: 10px; }


.ascii-animation { position: fixed; left: 0; top: -2%; width: 100%; height: 115vh; z-index: -20; pointer-events: none; }
.background-gridlines {
  position: fixed; left: 0; right: 0; top: 0; z-index: -1; width: 100%; height: 120vh; padding: 0 5px;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.grid-line { background: var(--gris); width: 1px; height: 100%; transform: scaleX(.5); transform-origin: 0 50%; }
.background_pixelgrid {
  position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(128, 128, 128, .13) 0, rgba(128, 128, 128, .13) 1px, transparent 1px, transparent 11px);
  opacity: .3;
}
.gridlayout-invisible { position: fixed; inset: 0 0 auto 0; z-index: -10; display: none; gap: 10px; height: 100vh; padding: 0 10px; pointer-events: none; }
.gridlayout-column { flex: 1; height: 100vh; background: rgba(0, 0, 0, .03); }


.page-transition { position: fixed; inset: 0; z-index: 1000; display: none; pointer-events: none; }
.js .page-transition { display: block; pointer-events: auto; }
.transition_column-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; }
.transition_column { width: 25%; height: 100%; overflow: hidden; }
.transition_column-background { width: 100%; height: 100%; background: var(--negro); }


.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; padding: 0; mix-blend-mode: difference; }
.header { justify-items: start; padding: 15px 10px; }
.nav_button {
  display: flex; align-items: center; gap: 10px; position: relative; overflow: clip; padding: 0; cursor: pointer;
  font-family: var(--mono); font-weight: 500; text-decoration: none; color: var(--blanco);
}
.header .nav_button:nth-child(1) { grid-column: span 6; }
.header .nav_button:nth-child(2), .header .nav_button:nth-child(3) { grid-column: span 3; }
.text-color_inverse { color: var(--blanco); }
.name-short { display: none; }
.button-square { background: var(--blanco); width: 10px; height: 10px; flex: none; position: absolute; left: -25px; }
.button-square.not-blinking { position: static; }
.button-square.blinking { opacity: 0; }
.nav_button-active { overflow: visible; }
.nav_button-active .button-square.blinking { opacity: 1; left: -20px; }
.nav_button.parpadea .not-blinking { animation: parpadeo .4s steps(1, end) infinite; }
@keyframes parpadeo { 0% { opacity: 1; } 50% { opacity: 0; } }


.hero { width: 100%; height: 100vh; height: 100svh; display: flex; align-items: flex-end; padding: 15px 10px; color: var(--negro); }
.hero.subpage-hero { height: auto; display: block; }
.title-h1 {
  text-transform: lowercase; text-indent: 25%; min-width: 100%; margin: 0; padding-bottom: .4vw;
  font-family: var(--titulo); font-size: 10vh; font-weight: 400; line-height: 102%;
}
.title-h1.small-h1 { margin-top: 25vh; font-size: 5vh; }


.project_wrapper { width: 100%; margin: 20vh 0 50vh; }
.project-tag_wrapper { height: 14px; padding: 0 10px; display: flex; }
.project-tag { font-size: 12px; line-height: 18px; color: var(--negro); }
.project-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.project_header-container {
  display: block; width: 100%; padding: 10px; border: 0; background: none; text-align: left; cursor: pointer; text-transform: lowercase;
}
.project_header { grid-template-rows: auto; justify-content: stretch; place-items: stretch start; width: 100%; max-width: 100vw; font-family: var(--mono); transition: background-color 0s .2s; }
.project_header-container:hover .project_header, .project_header-container:focus-visible .project_header { background: var(--negro); transition-delay: 0s; }
.project_header-container:focus-visible { outline-offset: -2px; }
.project-info_container { display: flex; justify-content: space-between; align-items: center; mix-blend-mode: difference; }
.project_header .project-info_container:nth-child(1) { grid-column: span 6; }
.project_header .project-info_container:nth-child(2), .project_header .project-info_container:nth-child(3) { grid-column: span 3; }
.project_header .project-info_container:nth-child(3) { justify-self: stretch; }
.project-info { display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 125%; font-weight: 400; cursor: pointer; margin: 0; }
.project-heading .project-info_container:nth-child(1) .project-info { font-weight: 700; }
.plus-icon { width: 16px; height: 16px; display: block; position: relative; z-index: 2; flex: none; color: var(--blanco); transform-origin: 50% 50%; }

.project-content_wrapper { overflow: hidden; }
.js .project-content_wrapper { height: 0; visibility: hidden; }
.project-contant_wrapper { grid-template-rows: auto; place-items: stretch start; width: 100%; max-width: 100vw; padding: 0 10px 20px; }
.acc-content_col { min-width: 0; }
.col-texto { grid-area: 1 / 1 / 2 / 6; }
.col-etq { grid-area: 1 / 7 / 2 / 10; }
.col-val { grid-area: 1 / 10 / 2 / 13; justify-self: stretch; }
.project-image_wrapper { color: var(--negro); }
.project-image_grid { padding: 0 5px; }
.layout-grid_list { display: flex; flex-flow: wrap; column-gap: var(--sep-col); row-gap: 2em; position: relative; }
.layout-grid_item { position: relative; will-change: transform; width: calc((100% - (var(--columnas) - 1) * var(--sep-col)) / var(--columnas)); }
.layout-grid_item.is--active { width: calc(((100% - (var(--columnas) - 1) * var(--sep-col)) / var(--columnas)) * 2 + var(--sep-col)); }
.js .layout-grid_item { opacity: 0; }
.project-image_outer { width: 100%; min-width: 100%; margin-bottom: 15px; padding: 0 5px; }
.image-wrapper { display: block; width: 100%; min-width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.image-wrapper:focus-visible { outline-offset: 2px; }
.thumbnail { display: block; min-width: 100%; width: 100%; height: auto; object-fit: cover; background: #f0f0f0; }
.thumbnail.portrait { aspect-ratio: 4 / 5; }
.thumbnail.landscape { aspect-ratio: 4 / 3; }
.thumbnail.square { aspect-ratio: 1; }
.video-container { display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; background: #f0f0f0; }
.video-container.square { aspect-ratio: 1; }
.video-container.portrait { aspect-ratio: 4 / 5; }
.project-video { width: 100%; height: 108%; object-fit: cover; display: block; }
.project-title_wrapper { padding-top: 2px; }
.project-image-tag { font-family: var(--mono); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }


.photos_wrapper { width: 100%; margin-top: 20vh; }
.photos-image_grid { --columnas: 6; padding: 0 5px; }


.about-text_container { display: flex; flex-flow: column; align-items: flex-start; justify-content: center; gap: 60px; margin-top: 20vh; }
.about-text_grid { width: 100%; padding: 10px; place-items: stretch start; }
.h2-about { grid-area: 1 / 4 / 2 / 7; font-size: 14px; font-weight: 400; line-height: 125%; }
.about-texto { grid-area: 1 / 7 / 2 / 11; }
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.en-vista { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.165, .84, .44, 1), transform .6s cubic-bezier(.165, .84, .44, 1); }
.about-img_container {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: 100%; column-gap: 10px; padding: 10px; overflow: hidden; pointer-events: none;
}
.about-img { grid-column: 23 / 25; grid-row: 1; align-self: start; justify-self: end; width: 90px; margin: 10px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform: rotate(10deg); }
.about-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.about-img_1 { z-index: 1; transform: rotate(10deg); }
.about-img_2 { z-index: 2; transform: rotate(10deg); }
.about-img_3 { z-index: 3; transform: rotate(-13deg); }
.about-img_4 { z-index: 4; transform: rotate(0deg); }


.footer { margin-top: 35vh; font-family: var(--mono); mix-blend-mode: difference; color: var(--blanco); }
.footer_grid { place-items: end start; padding: 15px 10px; width: 100%; max-width: 100vw; }
.credits-container { grid-column: 1 / span 6; }
.aviso { grid-column: 7 / span 3; text-transform: none; font-family: var(--mono); font-size: 12px; line-height: 18px; }
.aviso a { text-decoration: underline; text-underline-offset: 2px; }
.copyright-container { grid-column: 10 / span 3; justify-self: end; }


.scroll-down-tag { position: fixed; z-index: 9999; left: 0; top: 0; pointer-events: none; font-family: var(--mono); font-size: 12px; line-height: 18px; text-transform: lowercase; white-space: nowrap; }
.scroll-down-tag span { display: inline-block; opacity: 0; }


.mk-scan-word { display: inline; }

@media screen and (min-width: 1920px) {
  .button-square { width: 12px; height: 12px; }
  body, .project-info, .h2-about { font-size: 16px; }
  .project-image-tag, .project-tag { font-size: 14px; }
}
@media screen and (max-width: 991px) {
  .title-h1.small-h1 { font-size: 4vh; }
}
@media screen and (max-width: 767px) {
  :root { --columnas: 2; }
  .photos-image_grid { --columnas: 3; }
  .project_wrapper { margin: 14vh 0 35vh; }
}
@media screen and (max-width: 479px) {
  .name-long { display: none; }
  .name-short { display: block; }
  .grid-line { transform: scaleX(.25); }
  .ascii-animation { height: 100vh; top: 2%; }
  .title-h1 { font-size: 4.5vh; }
  .title-h1.small-h1 { margin-top: 20vh; font-size: 3vh; }
  .project_wrapper { margin: 10vh 0 25vh; }
  .project-info { justify-content: flex-end; align-items: center; }
  .project_header .project-info_container:nth-child(1) .project-info { justify-content: flex-start; }
  .project-info_container { justify-content: flex-end; align-items: center; }
  .project_header .project-info_container:nth-child(1) { justify-content: flex-start; }
  .mobile_invisible { display: none; }
  .layout-grid_list { row-gap: 1em; }
  .col-texto { grid-area: 1 / 1 / 2 / 13; }
  .col-etq { grid-area: 2 / 1 / 3 / 4; }
  .col-val { grid-area: 2 / 4 / 3 / 13; }
  .footer { margin-top: 25vh; }
  .footer_grid { row-gap: 6px; }
  .credits-container { grid-column: 1 / span 12; }
  .aviso { grid-column: 1 / span 9; grid-row: 2; }
  .copyright-container { grid-column: 10 / span 3; grid-row: 2; }
  .about-text_container { margin-top: 15vh; gap: 40px; }
  .h2-about { grid-area: 1 / 1 / 2 / 13; }
  .about-texto { grid-area: 2 / 1 / 3 / 13; }
  .photos_wrapper { margin-top: 10vh; }
  .about-img { width: 80px; align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .js .layout-grid_item, .js .reveal { opacity: 1; transform: none; }
  .js .page-transition { display: none; }
  .button-square, .nav_button.parpadea .not-blinking { animation: none; }
}