@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* ── IDENTIDAD ATELIER — shared.css ──────────────────────────────────────
   Importado por todas las páginas. Rutas de fuentes relativas a este archivo
   (raíz del proyecto), que coincide con donde están las carpetas fonts/.
──────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono.ttf') format('truetype');font-weight:400;font-style:normal;}
/* Etna no tiene tildes ni ñ → Instrument Serif como fallback para esos caracteres */
@font-face{font-family:'Inter';src:url('fonts/Inter-Light.ttf') format('truetype');font-weight:300;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.ttf') format('truetype');font-weight:400;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.ttf') format('truetype');font-weight:500;}

/* ── TOKENS ── */
:root{
  --white:#FFFDF6;
  --black:#0A0A0A;
  --sky:#D8EDFF;
  --muted:#777;
  --border:rgba(10,10,10,0.11);
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --pad:clamp(2.5rem,6vw,5rem);
}

/* ── BASE ── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:var(--black);background:var(--white);line-height:1.6;cursor:none;isolation:isolate;}
a{text-decoration:none;color:inherit;}
img{display:block;width:100%;}

/* ── CURSOR ── */
#cursor{
  position:fixed;width:10px;height:10px;
  background:#C8392B;border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s;
}
body:has(a:hover) #cursor,
body:has(button:hover) #cursor{width:20px;height:20px;}

/* ── GRAIN ── */
#grain-canvas{display:none;}
body::after{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:-1;
  opacity:0.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:300px 300px;
}

/* ── NAV ── */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);
  position:absolute;top:clamp(1.5rem,2.5vw,2rem);left:0;right:0;
  z-index:200;background:transparent;
}
.logo{font-family:'Instrument Serif',sans-serif;font-size:22px;color:var(--white);}
.nav-r{display:flex;gap:3rem;align-items:center;}
.nav-center{display:flex;gap:2rem;align-items:center;}
.nav-center a{
  font-size:13px;color:rgba(255,253,246,0.6);
  text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color 120ms var(--ease),border-color 120ms var(--ease);
}
.nav-center a:hover{color:var(--white);border-bottom-color:rgba(255,253,246,0.5);}
.nav-center a.active{color:var(--white);border-bottom-color:var(--white);}

/* ── LANG TOGGLE ── */
.lang-toggle{
  display:flex;align-items:center;
  font-family:'Geist Mono',monospace;font-size:9px;
  letter-spacing:0.1em;text-transform:uppercase;
  background:var(--black);border-radius:100px;padding:0.3rem 0.7rem;
}
.lang-sep{color:rgba(255,253,246,0.3);margin:0 3px;}
.lang-btn{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  color:rgba(255,253,246,0.45);transition:color 120ms var(--ease);
}
.lang-btn.active{color:var(--white);}
.lang-btn:hover{color:var(--white);}

/* ── NAV ON LIGHT BACKGROUND (pages without a dark hero image) ── */
body.nav-on-light nav .logo{color:var(--black);}
body.nav-on-light nav .nav-center a{color:rgba(10,10,10,0.45);}
body.nav-on-light nav .nav-center a:hover{color:var(--black);border-bottom-color:rgba(10,10,10,0.4);}
body.nav-on-light nav .nav-center a.active{color:var(--black);border-bottom-color:var(--black);}

/* ── COMING SOON CARD ── */
.cc-card--coming{cursor:default;}
.cc-card--coming .cc-back{display:none!important;}
.cc-coming-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,253,246,0.82);
  opacity:0;
  transition:opacity 0.3s var(--ease);
  z-index:10;
  font-family:'Inter',sans-serif;
  font-size:11px;
  color:rgba(10,10,10,0.45);
}
.cc-card--coming:hover .cc-coming-overlay{opacity:1;}

/* ── HAMBURGER BUTTON ── */
.hamburger-btn{
  display:none;
  background:none;border:none;cursor:pointer;
  flex-direction:column;justify-content:space-between;
  width:22px;height:15px;padding:0;flex-shrink:0;
}
.hamburger-btn span{
  display:block;height:1.5px;
  background:var(--white);
}
body.nav-on-light .hamburger-btn span{background:var(--black);}

/* ── MOBILE FULL-SCREEN MENU ── */
.mobile-menu{
  position:fixed;inset:0;
  background:var(--white);
  z-index:400;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:2rem;
  opacity:0;visibility:hidden;
  transition:opacity 0.35s var(--ease),visibility 0s linear 0.35s;
}
.mobile-menu.open{
  opacity:1;visibility:visible;
  transition:opacity 0.35s var(--ease),visibility 0s;
}
.mobile-menu-close{
  position:absolute;top:clamp(1.2rem,3vw,1.8rem);right:clamp(1.2rem,3vw,1.8rem);
  background:none;border:none;cursor:pointer;
  width:24px;height:24px;padding:0;
}
.mobile-menu-close span{
  display:block;width:100%;height:1.5px;background:var(--black);
  position:absolute;top:calc(50% - 0.75px);left:0;
  transform-origin:center;
}
.mobile-menu-close span:first-child{transform:rotate(45deg);}
.mobile-menu-close span:last-child{transform:rotate(-45deg);}
.mobile-menu-links{
  display:flex;flex-direction:column;align-items:center;gap:1.75rem;
  text-align:center;
}
.mobile-menu-links a{
  font-family:'Instrument Serif',sans-serif;
  font-size:clamp(28px,8vw,40px);
  color:var(--black);line-height:1;
}

/* ── BACK BUTTON ── */
.back-btn{
  position:fixed;bottom:clamp(1.5rem,2.5vw,2rem);left:var(--pad);
  z-index:500;
  font-family:'Inter',sans-serif;font-size:11px;
  color:var(--black);
  background:var(--white);
  border:1px solid rgba(10,10,10,0.14);
  border-radius:100px;
  padding:0.4rem 1rem;
  transition:background 120ms var(--ease),color 120ms var(--ease);
}
.back-btn:hover{background:var(--black);color:#fff;}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
.reveal.visible{opacity:1;transform:none;}

/* ── FIRMA ── */
.firma{padding:clamp(5rem,10vw,9rem) var(--pad) clamp(4rem,8vw,7rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;}
.firma-bag{width:clamp(50px,6vw,80px);height:auto;display:block;margin:0 auto 0.3rem;}
.firma-by,
.firma-name{font-family:'Instrument Serif',sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:400;line-height:1;color:var(--black);text-align:center;}

/* ── FOOTER ── */
footer{background:var(--black);color:var(--white);padding:clamp(4rem,6vw,6rem) var(--pad) 0;overflow:hidden;}
.foot-top-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:clamp(2rem,3.5vw,3rem);border-bottom:1px solid rgba(255,253,246,0.08);}
.foot-nav{display:flex;gap:2rem;}
.foot-nav a{font-size:11px;color:rgba(255,253,246,0.45);transition:color 120ms var(--ease);}
.foot-nav a:hover{color:var(--white);}
.foot-ig{font-family:'Inter',sans-serif;font-size:11px;color:rgba(255,253,246,0.7);text-decoration:underline;text-underline-offset:3px;transition:color 120ms var(--ease);}
.foot-ig:hover{color:var(--white);}
.foot-contact-row{display:flex;justify-content:space-between;align-items:flex-end;padding:clamp(2rem,4vw,3.5rem) 0;}
.foot-contact-left{display:flex;gap:clamp(2.5rem,5vw,6rem);}
.foot-contact-label{font-family:'Inter',sans-serif;font-size:10px;color:rgba(255,253,246,0.35);display:block;margin-bottom:0.4rem;}
.foot-email{font-size:clamp(15px,1.5vw,19px);color:rgba(255,253,246,0.75);display:block;transition:color 120ms var(--ease);text-decoration:underline;text-underline-offset:3px;}
.foot-email:hover{color:var(--white);}
.foot-year{font-family:'Inter',sans-serif;font-size:11px;color:rgba(255,253,246,0.3);}
.foot-big{padding:1.5rem 0;margin:0 calc(var(--pad) * -1);overflow:hidden;}
.foot-big span{font-family:'Instrument Serif',sans-serif;font-size:100px;font-weight:400;line-height:0.88;color:var(--white);display:block;white-space:nowrap;}

/* ── MOBILE ── */
@media(max-width:680px){
  /* Project pages: pares sin padding lateral para que sean más grandes */
  .img-pair{padding-left:0!important;padding-right:0!important;gap:2px!important;}
  /* Nav */
  .nav-center{display:none!important;}
  .lang-toggle{display:none;}
  .hamburger-btn{display:flex;}
  .logo{font-size:15px;}
  /* Lang toggle inside hamburger overlay */
  .mobile-menu .lang-toggle{display:flex;}
  /* Firma bag */
  .firma-bag{width:36px;}
  /* Footer */
  .foot-top-row{flex-direction:column;align-items:flex-start;gap:0.75rem;}
  .foot-contact-row{flex-direction:column;gap:1.5rem;align-items:flex-start;}
  .foot-contact-left{flex-direction:column;gap:1.5rem;}
}