@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root{--black:#090909;--white:#f4f4f1;--muted:#a8a8a3;--line:#333}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:"Jost",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:5px}
[hidden]{display:none!important}
.visually-hidden,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:12px;left:12px;background:var(--white);color:var(--black);padding:12px 16px;z-index:100}

.site-header,.project-page header{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding:24px 5%;background:transparent;color:var(--white);text-shadow:0 1px 12px #0009}
.brand,.wordmark{display:block;width:165px;flex-shrink:0}
.brand,.wordmark{filter:invert(1)}
.studio-logo{display:block;width:100%;height:auto}
.home-page:not([data-view="portada"]) .site-header{background:var(--black);text-shadow:none}
nav{display:flex;align-items:flex-start;gap:34px;font-size:15px;letter-spacing:.035em;text-transform:uppercase}
nav>a,.architecture-label,.nav-toggle{padding:9px 0}
nav>a:hover,.nav-submenu a:hover{text-decoration:underline;text-underline-offset:5px}
.architecture-label{border:0;background:none;color:inherit;font:inherit;cursor:pointer;user-select:none;text-transform:uppercase}
.architecture-nav{position:relative;display:grid;grid-template-columns:auto 20px;column-gap:3px;align-items:start}
.nav-toggle{border:0;background:none;cursor:pointer;padding-inline:2px}
.nav-toggle span{display:block;font-size:11px;transition:transform .25s}
.nav-toggle[aria-expanded=true] span{transform:rotate(180deg)}
.nav-submenu{position:absolute;top:31px;left:0;display:grid;min-width:130px;padding:7px 0 5px;background:transparent;text-shadow:0 1px 12px #000}
.architecture-nav:focus-within .nav-submenu[hidden],.architecture-nav:hover .nav-submenu[hidden]{display:grid!important}
.home-page:not([data-view="portada"]) .nav-submenu{background:var(--black);text-shadow:none}
.nav-submenu a{padding:7px 0;font-size:14px;white-space:nowrap}

.home-hero{position:relative;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#111}
.home-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0008 0,#0000 28%,#0002 100%);z-index:2}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 1.4s;z-index:0}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1);transform:scale(1.015);transition:transform 8s linear}
.hero-slide.is-active img{transform:scale(1.055)}
.slide-progress{position:absolute;left:5%;bottom:24px;width:72px;height:1px;background:#ffffff45;z-index:3;overflow:hidden}
.slide-progress span{display:block;width:0;height:100%;background:#fff}
.slide-progress span.is-running{animation:progress 6s linear forwards}
@keyframes progress{to{width:100%}}

.works-view,.text-view{min-height:100svh;padding:145px 5% 90px;background:var(--black)}
.works-heading{display:flex;align-items:baseline;gap:20px;margin:0 0 42px;border-bottom:1px solid var(--line);padding-bottom:20px}
.works-heading h2,.text-view h2{margin:0;font-size:clamp(29px,3.2vw,54px);font-weight:400;letter-spacing:-.035em;line-height:1}
.works-heading p{margin:0;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
.project-card{display:block;min-width:0}
.card-image{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#1c1c1c}
.card-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1);transform:scale(1.001);transition:filter .9s ease,transform 1.8s cubic-bezier(.2,.6,.3,1)}
.project-card-casa8 .card-image img{object-position:center 18%}
.project-card:hover .card-image img,.project-card:focus-visible .card-image img{filter:grayscale(0);transform:scale(1.045)}
.card-caption{display:flex;justify-content:space-between;gap:18px;padding:13px 1px 0;font-size:14px;line-height:1.5}
.card-caption strong{font-weight:400}
.card-caption small{color:var(--muted);font-size:13px;text-align:right}
.text-view{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding-top:24vh}
.text-view>p{margin:0;max-width:790px;font-size:clamp(23px,3vw,44px);line-height:1.45;letter-spacing:-.025em}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-size:clamp(20px,2.3vw,34px)}
.contact-links a:hover{text-decoration:underline;text-underline-offset:6px}
.studio-view,.contact-view{grid-template-columns:minmax(170px,.65fr) minmax(0,2fr);gap:clamp(48px,8vw,150px);padding-top:155px;align-items:start}
.studio-view .view-heading h2,.contact-view .view-heading h2{margin:0 0 18px;font-size:18px;font-weight:400;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.view-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.65;letter-spacing:.055em;text-transform:uppercase}
.studio-layout{width:min(100%,780px)}
.studio-copy{width:100%;max-width:none}
.studio-copy p{margin:0 0 22px;font-size:15px;line-height:1.75;letter-spacing:.005em;color:#dedede}
.studio-copy p:first-child{font-size:18px;line-height:1.65;color:var(--white)}
.studio-materials{width:100%;margin:34px 0 0}
.studio-materials img{display:block;width:100%;height:auto}
.contact-layout{max-width:760px;padding-top:4px}
.contact-intro{max-width:580px;margin:0 0 clamp(64px,10vh,120px);font-size:18px;line-height:1.65;color:#dedede}
.contact-view .contact-links{gap:0;font-size:15px;font-style:normal}
.contact-view .contact-links a{display:grid;grid-template-columns:120px 1fr;gap:28px;width:100%;padding:18px 0;border-top:1px solid var(--line);line-height:1.5}
.contact-view .contact-links a:last-child{border-bottom:1px solid var(--line)}
.contact-view .contact-links span{color:var(--muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
footer{margin:0 5%;padding:25px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px}
footer .wordmark{width:108px}
footer p,footer>a:last-child{font-size:13px;color:var(--muted)}

/* Project pages */
.project-page{background:var(--black);color:var(--white)}
.project-page header{position:relative;min-height:138px}
.project-page .brand,.project-page .wordmark{filter:invert(1)}
.project-detail{margin:0 2%}
.project-intro{display:block;padding:30px 3% 48px}
.project-intro h1{font-size:clamp(18px,1.6vw,24px);font-weight:400;letter-spacing:-.015em;line-height:1.15;margin:0 0 8px}
.project-intro p{margin:0;color:var(--muted);font-size:14px}
.project-switcher{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:0 3% 36px;padding:14px 0;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;text-transform:none}
.project-switcher a{color:var(--muted);font-size:13px;letter-spacing:.02em;transition:color .2s ease}
.project-switcher a:nth-child(2){text-align:center}
.project-switcher a:last-child{text-align:right}
.project-switcher a:hover,.project-switcher a:focus-visible{color:var(--white)}
.project-switcher-bottom{margin-top:42px;margin-bottom:0}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.project-photo{appearance:none;border:0;padding:0;background:#1b1b1b;display:block;width:100%;cursor:zoom-in;overflow:hidden}
.project-photo-wide{grid-column:1/-1}
.project-photo img{display:block;width:100%;height:auto;transition:transform 1.8s cubic-bezier(.2,.6,.3,1)}
.project-photo:hover img,.project-photo:focus-visible img{transform:scale(1.018)}
.project-page footer{margin-top:80px}
dialog{border:0;padding:50px 25px 16px;background:#111;color:#fff;width:min(1400px,96vw);max-height:94vh}
dialog::backdrop{background:#000e}
dialog img{display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto}
dialog p{font-size:12px;line-height:1.7;text-align:center;color:var(--muted)}
.close{position:absolute;right:24px;top:15px;border:0;background:none;cursor:pointer;padding:5px;font-size:13px}

@media(max-width:760px){
  .site-header,.project-page header{padding:18px 5%;flex-wrap:wrap;gap:12px;background:transparent}
  .brand{width:124px}
  nav{width:100%;justify-content:space-between;gap:8px;font-size:13px}
  .architecture-nav{grid-template-columns:auto 17px}
  .nav-submenu{top:27px}
  .home-hero{min-height:520px}
  .hero-slide img{object-position:center}
  .works-view,.text-view{padding:138px 4% 65px}
  .works-heading{margin-bottom:26px}
  .works-grid{grid-template-columns:1fr;gap:28px}
  .card-image{aspect-ratio:4/3}
  .card-caption{align-items:flex-start}
  .text-view{grid-template-columns:1fr;gap:36px;padding-top:22vh}
  .studio-view,.contact-view{grid-template-columns:1fr;gap:42px;padding-top:138px}
  .studio-layout{grid-template-columns:1fr;gap:34px}
  .studio-materials{width:100%;margin-top:0}
  .contact-intro{margin-bottom:54px}
  .contact-view .contact-links a{grid-template-columns:92px 1fr;gap:18px}
  footer{flex-wrap:wrap;margin-inline:4%}
  footer p{display:none}
  .project-page header{position:relative;min-height:118px;background:var(--black)}
  .project-page nav{font-size:12px}
  .project-detail{margin:0 3%}
  .project-intro{padding:28px 2% 38px}
  .project-switcher{gap:8px;margin:0 2% 28px;padding:13px 0}
  .project-switcher a{font-size:12px;line-height:1.35}
  .project-switcher-bottom{margin-top:32px;margin-bottom:0}
  .project-gallery{grid-template-columns:1fr;gap:12px}
  .project-photo-wide{grid-column:auto}
  .project-page footer{margin-top:55px}
}

@media(hover:none){.card-image img{filter:grayscale(1)}.project-card:active .card-image img{filter:grayscale(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide,.hero-slide img,.card-image img,.project-photo img,.nav-toggle span{transition:none}.slide-progress{display:none}.hero-slide.is-active img,.project-card:hover .card-image img,.project-photo:hover img{transform:none}}