*, :after, :before {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 0; box-sizing: border-box; color: inherit; font: inherit; font-synthesis: none;
  margin: 0; padding: 0; text-rendering: optimizeLegibility;
}
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

[hidden] { display: none !important; }
a, button { color: inherit; cursor: pointer; text-decoration: none; background: none; }
a:focus, button:focus { outline: none; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
img, picture, svg, video { display: block; max-width: 100%; }

body {
  background-color: #121212; color: #2b2728;
  font-family: "Libertinus Mono", "Courier New", ui-monospace, monospace;
  font-size: 12px; letter-spacing: -.02em; line-height: 1.3;
}
@media (max-width: 768px) { body { font-size: 11px; } }
body ::selection { background: #cd6238; color: #000; }
body.bloqueado { overflow: hidden; }

main { background-color: #f5f5f5; min-height: 100vh; transition: background .75s ease; position: relative; }


.link { text-decoration: none; }
.text-center { text-align: center; }
.uppercase { letter-spacing: 0; text-transform: uppercase; }
.overflow { overflow: hidden; }
.pointer-all { pointer-events: all; }
.pointer-none { pointer-events: none; }
.flex { display: flex; }
.gap-2 { gap: 2px; } .gap-20 { gap: 20px; }
.ma { margin: auto; } .mla { margin-left: auto; } .mba { margin-bottom: auto; }
.pos-rel { position: relative; }
.pb20 { padding-bottom: 20px; }
.bg-grey { background-color: rgba(0, 0, 0, .1); }
.bg-image { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.spacer { height: 100px; }
.ratio-3-4 { aspect-ratio: 3/4; width: 100%; }
.ratio-4-3 { aspect-ratio: 4/3; width: 100%; }
.ratio-1-1 { aspect-ratio: 4/5; width: 100%; }
.text-sm { font-size: 10px; }
.balance { text-wrap: balance; }
.m-solo { display: none; }
@media (max-width: 768px) { .d-solo { display: none; } .m-solo { display: inline; } }
.max-350 { max-width: 350px; }
.mb-20 { margin-bottom: 20px; } .mb-40 { height: 40px; }
.f-16 { font-size: 16px; letter-spacing: -.32px; }
.pr-11 { padding-right: 10%; } .pl-11 { padding-left: 10%; }
.m-show { display: none; }
@media (max-width: 768px) { .m-hide { display: none; } .m-show { display: inherit; } .spacer.m-small { height: 60px; } }
.transition-opacity { transition: opacity .3s ease; }
img[data-l] { opacity: 0; transition: opacity .25s linear; }
img[data-l].cargada { opacity: 1; }
html:not(.js) img[data-l] { opacity: 1; }
.bn { filter: grayscale(1) contrast(1.04); }

.item-img .image img:not(.bn), .gal-item img:not(.bn), .pv-sig-img:not(.bn), .copia-img img:not(.bn), .lista-fondo-capa img { filter: saturate(.82) contrast(1.02); }


.icon-plus {
  aspect-ratio: 1; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBzdHJva2U9IiMxOTFDMUQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTIuMDgzIDVoNS44MzRNNSAyLjA4M3Y1LjgzNCIvPjwvc3ZnPg==");
  background-position: 50%; background-repeat: no-repeat; background-size: contain; margin: 0 auto; width: 13px;
  transition: transform .4s ease;
}
.icon-plus.white { filter: brightness(0) invert(1); }
.bottom-caption:hover .icon-plus, .hero-caption:hover .icon-plus { transform: rotate(180deg); }


.masthead {
  align-items: center; color: #fff; display: flex; justify-content: space-between; left: 0; padding: 15px;
  pointer-events: none; position: fixed; top: 0; transition: color .5s ease; width: 100%; z-index: 100;
}
.masthead.dark { color: #2b2728; }
.masthead.sobre-foto { color: #fff; }
.masthead .inactive { opacity: .3; }
.menu-links:hover .link, .menu-links:hover span { opacity: .5; }
.menu-links:hover .link:hover { opacity: 1; }
.menu-links:hover .inactive { opacity: .3; }
.menu-links:hover .link.inactive:hover { opacity: 1; }
.mobile-menu { cursor: pointer; letter-spacing: inherit; }
.cerrar-menu { cursor: pointer; letter-spacing: inherit; text-align: left; line-height: inherit; }
.volver { display: flex; align-items: center; gap: 20px; }
.volver[hidden], .proyectos-nav[hidden] { display: none; }
.overlay-menu {
  align-items: flex-start;
  backdrop-filter: blur(12.6px); -webkit-backdrop-filter: blur(12.6px); background: rgba(255, 252, 248, .75);
  height: 100%; left: 0; opacity: 0; padding: 15px; pointer-events: none; position: fixed; top: 0;
  transition: opacity .5s ease; width: 100%; z-index: 101;
}
body.menu-open .overlay-menu { opacity: 1; pointer-events: all; }
.proyectos-nav { display: flex; gap: 4px; left: calc(25% + 9px); position: fixed; top: 15px; transition: color .3s ease; z-index: 100; color: #2b2728; }
.proyectos-nav.list-hovered { color: #fff; }
.proyectos-nav a { opacity: .3; transition: opacity .3s ease; }
.proyectos-nav a[aria-current] { opacity: 1; }
.proyectos-nav-sep { opacity: .3; }
@media (max-width: 768px) { .proyectos-nav { left: 50%; transform: translateX(-50%); } }


.precarga { display: none; background-color: #fffcf8; height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 120; }
.js .precarga { display: block; }
.precarga-inner { display: flex; height: 100svh; left: 0; position: absolute; top: 0; width: 100%; }
.precarga-imgs { display: flex; gap: 1px; margin: auto 0 auto -3.5714285714vw; position: relative; z-index: 2; }
.precarga-img { aspect-ratio: 3/2; opacity: 0; position: relative; transform: translateY(10px); width: 7.1428571429vw; flex: none; }
.precarga-img .bg { background-color: #fffcf8; bottom: -1px; left: 0; position: absolute; width: 100%; z-index: 2; height: 0; }
@media (max-width: 768px) {
  .precarga-imgs { margin-left: -8.3333333333vw; }
  .precarga-img { transform: translateY(5px); width: 16.6666666667vw; }
}
.js body:not(.precarga-lista) .masthead, .js body:not(.precarga-lista) .hero-caption { opacity: 0; }


.hero-banner { background-color: #121212; height: 100vh; width: 100%; overflow: hidden; position: relative; }
.hero-banner .media { opacity: 0; }
.js .hero-banner .media { opacity: 0; }
html:not(.js) .hero-banner .media { opacity: 1; }
.hero-caption { color: #fff; left: 50%; max-width: 350px; position: absolute; text-align: center; top: 15px; transform: translateX(-50%); z-index: 2; }
.hero-caption > p { margin: 0 0 20px; }


.project-grid { column-gap: 1px; display: grid; grid-template-columns: repeat(6, 1fr); padding: 15px; row-gap: 30px; }
.proyecto, .thumbs { display: contents; }
.item { display: block; transition: opacity .3s ease; }
.item-texto { cursor: pointer; }
.item-texto .lbl { margin: 10px 0; }
.item-img { display: flex; flex-direction: column; pointer-events: none; }
.item-img .n { margin-bottom: 10px; opacity: 0; transition: opacity .3s ease; }
.item-img .image { pointer-events: all; position: relative; overflow: hidden; transform: scale(.8); transform-origin: top; transition: transform .3s; }
.project-grid.has-hover .item.hovered .n { opacity: 1; }
.project-grid.has-hover .item:not(.hovered) { opacity: .2; }
.project-grid.has-hover .item-img.thumb-hovered .image { transform: scale(1.2); }
.project-grid.has-hover .item-img.thumb-hovered { position: relative; z-index: 1; }


.bottom-caption { cursor: pointer; }
.bottom-caption > p { margin: 0 0 20px; }
.pie { padding: 0 15px 14px; text-align: center; font-size: 10px; opacity: .55; }
.pie a { text-decoration: underline; text-underline-offset: 2px; }


@media (max-width: 768px) {
  .project-grid { display: flex; flex-direction: column; gap: 40px; padding: 0; }
  .proyecto { display: flex; flex-direction: column; gap: 20px; }
  .item-texto { padding: 0 15px; }
  .item-texto.pr-11, .item-texto.pl-11 { padding-left: 15px; padding-right: 15px; }
  .thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 15px; }
  .item-img { pointer-events: auto; opacity: 1 !important; }
  .item-img .n { opacity: 1 !important; }
  .item-img .image { transform: none !important; }
  .item { opacity: 1 !important; }
  .mb-40 { height: 20px; }
  .item-texto .lbl { margin-top: 0; }
}


.vista {
  background-color: #f5f5f5; color: #2b2728; inset: 0; opacity: 0; overflow-x: hidden; overflow-y: auto; position: fixed;
  transition: opacity .5s ease; z-index: 90; overscroll-behavior: contain;
}
.vista[hidden] { display: none; }
.vista.abierta { opacity: 1; }
.vista-pie { padding: 0 15px 15px; font-size: 10px; opacity: .55; }
.vista-pie a { text-decoration: underline; text-underline-offset: 2px; }


.pv-info { left: 0; padding: 0 15px; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; transition: opacity .3s ease; pointer-events: none; }
.pv-grid { align-items: start; display: grid; gap: 10px; grid-template-columns: 1fr 40vw 1fr; }
.pv-meta { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.pv-cont { margin-top: 0; }
.pv-galeria { padding-top: 51vh; position: relative; z-index: 2; pointer-events: none; }
.gal-item { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: 0 auto 50px; max-width: 70vw; transition: opacity .3s ease; }
.gal-item img { aspect-ratio: var(--r); height: auto; max-width: 100%; pointer-events: auto; width: min(calc(var(--w) * 1vw), calc(80vh * var(--r))); }
.pv-galeria.sig-visible .gal-item, .pv-galeria.tira-hover .gal-item { opacity: .1; }
.vista-proyecto.sig-visible .pv-info { opacity: 0; }
.pv-sig { align-items: center; display: flex; flex-direction: column; padding: 300px 0 0; pointer-events: auto; transition: color .4s ease; }
.vista-proyecto.sig-visible .pv-sig:hover { color: #fff; }
.pv-sig-t { margin-bottom: 20px; }
.pv-sig-img { max-height: 50vh; max-width: 50vw; width: auto; height: auto; }
.vista-proyecto { transition: opacity .5s ease, background-color .75s ease, color .75s ease; }
.vista-proyecto.sig-visible { background-color: #121212; color: #f5f5f5; }
.tira { bottom: 15px; display: flex; gap: 1px; height: 8.89vh; left: 15px; opacity: .1; position: fixed; right: 15px; transition: opacity .3s ease; z-index: 3; }
.tira.activa { opacity: 1; z-index: 5; }
.tira.oculta { opacity: 0; pointer-events: none; }
.tira-item { aspect-ratio: 3/2; cursor: pointer; flex: 0 1 auto; height: 100%; min-width: 0; overflow: hidden; }
.tira-item.v { aspect-ratio: 2/3; }
.tira-item img { height: 100%; width: 100%; max-width: none; object-fit: cover; }
@media (max-width: 768px) {
  .pv-info { color: #fff; mix-blend-mode: difference; z-index: 5; }
  .pv-grid { grid-template-columns: 1fr auto; grid-template-areas: "t c" "z ." "a ."; gap: 0 10px; }
  .pv-grid > :last-child { display: none; }
  .pv-t, .pv-meta { display: contents; }
  .pv-titulo { grid-area: t; } .pv-cont { grid-area: c; text-align: right; } .pv-z { grid-area: z; } .pv-a { grid-area: a; }
  .pv-galeria { padding-top: calc(51vh + 20px); padding-left: 10px; padding-right: 10px; }
  .gal-item { max-width: 100%; width: 100%; margin-bottom: 10px; }
  .gal-item img { max-width: 100%; width: 100%; max-height: 80vh; object-fit: contain; }
  .tira { display: none; }
  .pv-sig-img { max-width: 100%; max-height: 80vh; }
  .pv-sig { padding-bottom: 40px; padding-top: 200px; }
  .gal-item img { width: 100%; }
}


.lista { padding: 200px 15px 15px; position: relative; z-index: 1; }
.lista-fila { align-items: baseline; color: #2b2728; display: flex; line-height: 1.3; padding: 1px 0; transition: opacity .5s ease, color .5s ease; }
.lc { flex-shrink: 0; white-space: nowrap; }
.lc-titulo { width: 25%; } .lc-cat { width: 25%; } .lc-serv { flex: 1 1; } .lc-n { width: 8.33%; } .lc-anio { width: 16.67%; }
.lista.hover .lista-fila { color: #fff; }
.lista.hover .lista-fila:not(.hovered) { opacity: .1; }
.lista-moviles { display: none; }
.lista-fondo { height: 100vh; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; transition: opacity .5s ease; width: 100vw; z-index: 0; }
.lista-fondo.visible { opacity: 1; }
.lista-fondo-capa { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .5s ease; width: 100%; overflow: hidden; }
.lista-fondo-capa img { height: 100%; width: 100%; max-width: none; object-fit: cover; transform: scale(1.006); transition: transform 1s ease; }
.lista-fondo-capa.visible { opacity: 1; z-index: 1; }
.lista-fondo-capa.visible img { transform: none; }
.lista-descs { pointer-events: none; }
.lista-desc { bottom: 20px; color: #fff; left: 50%; opacity: 0; position: fixed; transform: translateX(-50%); transition: opacity .5s ease; width: calc(50% - 15px); z-index: 1; }
.lista-desc.visible { opacity: 1; }
@media (max-width: 768px) {
  .lista { padding: 90px 15px 120px; }
  .lista-filas { display: none; }
  .lista-moviles { display: block; }
  .lista-movil { display: block; margin-bottom: 80px; }
  .lista-movil .text-sm { margin-bottom: 10px; }
  .lista-movil p + p { margin: 0; }
  .lista-desc { display: none; }
}


.copias-cab { padding: 15px 15px 0; position: relative; }
.copias-cab > p { padding-top: 0; }
.copias-filtro { display: flex; gap: 4px; justify-content: center; margin-top: 60px; }
.copias-filtro button { cursor: pointer; opacity: .3; transition: opacity .5s ease; }
.copias-filtro button.activo, .copias-filtro span { opacity: 1; }
.copias-filtro span { opacity: .3; }
.copias-rejilla { display: grid; gap: 10vw; grid-template-columns: repeat(3, 1fr); padding: 60px 15px 80px; }
.copia-img { overflow: hidden; background: rgba(0, 0, 0, .1); position: relative; }
.copia-img img { height: 100%; width: 100%; max-width: none; object-fit: cover; position: absolute; left: 0; top: 0; transition: transform .5s ease; }
.copia:hover .copia-img img { transform: scale(1.02); }
.copia[hidden] { display: none; }
.copia-pie { display: flex; justify-content: space-between; gap: 20px; margin-top: 10px; }
.copia-acc { text-align: right; }
.consultar { cursor: pointer; text-align: right; display: inline-block; position: relative; }
.consultar:after { background-color: rgba(0, 0, 0, .2); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; transition: width .3s ease; width: 0; }
.consultar:hover:after { width: 100%; }
.copias-nota { min-height: 1.3em; padding: 0 15px 30px; text-align: center; }
.estudio-nota { min-height: 1.3em; margin-top: 20px; }
@media (max-width: 768px) {
  .copias-rejilla { grid-template-columns: 1fr; gap: 60px; padding-top: 40px; }
  .copias-filtro { margin-top: 60px; }
  .copias-cab { padding-top: 55px; }
}


.vista-estudio { display: flex; flex-direction: column; }
.estudio-grid { flex: 1 0 auto; padding: 15px; position: relative; }
.vista-estudio .vista-pie { margin-top: auto; }
.estudio-texto { max-width: 350px; padding-top: 31px; }
.estudio-texto p { margin-bottom: 20px; }
.indent p:before { content: ""; display: inline-block; width: 40px; }
.estudio-datos { left: 50%; position: absolute; top: 45px; }
.estudio-datos p { display: flex; margin-bottom: 15px; }
.estudio-letra { display: inline-block; width: 60px; flex-shrink: 0; }
.estudio-foto { left: 50%; position: absolute; top: 128px; transform: translateX(-50%); width: 31.7vw; opacity: .16; transition: opacity .5s ease; }
.estudio-foto:hover { opacity: 1; }
.estudio-foto .ratio-3-4 { position: relative; overflow: hidden; }
.estudio-foto img { height: 100%; width: 100%; max-width: none; object-fit: cover; position: absolute; left: 0; top: 0; }
.ul-link { display: inline-block; position: relative; }
.ul-link:after { background-color: rgba(0, 0, 0, .2); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; transition: width .3s ease; width: 100%; }
.ul-link:hover:after { width: 0; }
@media (max-width: 768px) {
  .estudio-grid { display: flex; flex-direction: column; gap: 20px; padding-top: 60px; }
  .estudio-texto { max-width: none; padding-top: 0; }
  .estudio-datos, .estudio-foto { position: static; transform: none; }
  .estudio-datos { order: 3; margin: 20px 0 40px; }
  .estudio-foto { order: 1; opacity: 1; width: 100%; }
  .estudio-texto { order: 2; }
}


@media (prefers-reduced-motion: reduce) {
  *, :after, :before { animation: none !important; transition: none !important; }
  .precarga { display: none !important; }
  .hero-banner .media { opacity: 1 !important; }
  .js body:not(.precarga-lista) .masthead, .js body:not(.precarga-lista) .hero-caption { opacity: 1 !important; }
  img[data-l] { opacity: 1; }
}