/* mcarva · canonical shared project header */
:root{
  --project-header-h:84px;
  --project-header-pad:clamp(24px,4vw,72px);
  --project-overlay-z:1100;
}

.project-shell-skip{
  position:fixed;
  z-index:10050;
  left:16px;
  top:16px;
  transform:translateY(-180%);
  padding:10px 14px;
  border-radius:2px;
  background:#fff;
  color:#171713;
  font:600 11px/1.2 "Manrope","Segoe UI",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s ease;
}
.project-shell-skip:focus{
  transform:none;
  outline:2px solid currentColor;
  outline-offset:3px;
}

.topbar{
  position:fixed;
  z-index:1200;
  inset:0 0 auto;
  width:100%;
  height:var(--project-header-h);
  padding:0;
  margin:0;
  transform:none;
  color:#fffdf8;
  pointer-events:none;
  background-color:rgba(20,18,16,.54);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:color .32s ease,background-color .32s ease,backdrop-filter .32s ease;
}
.topbar::after{
  content:"";
  position:absolute;
  left:var(--project-header-pad);
  right:var(--project-header-pad);
  bottom:0;
  height:1px;
  background:currentColor;
  opacity:.16;
}
.topbar-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  padding:0 var(--project-header-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:inherit;
  mix-blend-mode:normal;
}

.brand{
  position:relative;
  z-index:8;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:clamp(92px,7vw,116px);
  height:auto;
  min-height:40px;
  pointer-events:auto;
  text-decoration:none;
}
.brand-logo,
.brand img.brand-logo,
.brand img.brand-white,
.brand img.brand-red{
  position:static;
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  transform:none;
  opacity:1;
  filter:none;
  transition:filter .28s ease,opacity .28s ease;
}

.project-shell-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:38vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 9px/1.2 "Manrope","Avenir Next","Segoe UI",sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.66;
  pointer-events:none;
}

.project-shell-tools{
  position:relative;
  z-index:8;
  flex:0 0 auto;
  min-width:0;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(12px,1.5vw,23px);
  pointer-events:auto;
}
.project-shell-back,
.project-shell-lang button,
.project-shell-tools .menu-button{
  position:relative;
  min-width:40px;
  min-height:40px;
  padding:12px 6px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:inherit;
  font:600 9px/1 "Manrope","Avenir Next","Segoe UI",sans-serif;
  letter-spacing:.17em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  opacity:.68;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.project-shell-back:hover,
.project-shell-back:focus-visible,
.project-shell-lang button:hover,
.project-shell-lang button:focus-visible,
.project-shell-tools .menu-button:hover,
.project-shell-tools .menu-button:focus-visible{
  opacity:1;
  outline:none;
}
.project-shell-back::after,
.project-shell-lang button.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:1px;
  background:currentColor;
  opacity:.55;
}
.project-shell-lang{
  display:flex;
  align-items:center;
  gap:9px;
}
.project-shell-lang button{opacity:.34}
.project-shell-lang button.is-active{opacity:.92}
.project-shell-lang button+button::before{
  content:"/";
  position:absolute;
  left:-7px;
  opacity:.28;
}
.project-shell-tools .menu-button{
  gap:12px;
  margin-left:1px;
}
.menu-icon{
  position:relative;
  display:inline-block;
  width:28px;
  height:12px;
  flex:0 0 auto;
}
.menu-icon::before,
.menu-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transition:transform .35s cubic-bezier(.2,.72,.2,1),top .35s cubic-bezier(.2,.72,.2,1);
}
.menu-icon::before{top:1px}
.menu-icon::after{top:10px}
body.menu-open .menu-icon::before{top:5px;transform:rotate(45deg)}
body.menu-open .menu-icon::after{top:5px;transform:rotate(-45deg)}

body.theme-light:not(.menu-open):not(.lightbox-open) .topbar,
body.header-light:not(.menu-open):not(.lightbox-open) .topbar{
  color:#181410;
  background-color:rgba(245,242,236,.78);
}
body.theme-light:not(.menu-open):not(.lightbox-open) .brand-logo,
body.header-light:not(.menu-open):not(.lightbox-open) .brand-logo{
  filter:brightness(0) saturate(100%);
  opacity:.88;
}
body.menu-open .topbar,
body.lightbox-open .topbar{
  color:#fffdf8;
  background-color:rgba(20,18,16,.76);
}
body.menu-open .brand-logo,
body.lightbox-open .brand-logo{
  filter:none;
  opacity:1;
}

/* Compatibility details preserved from the approved project layouts. */
body[data-project="materia-y-luz"].menu-open .topbar-inner,
body[data-project="materia-y-luz"].lightbox-open .topbar-inner{
  color:#fff;
}


@media(max-width:760px){
  body[data-project="residencia-22"] .topbar{
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body[data-project="residencia-22"].theme-light:not(.menu-open):not(.lightbox-open) .topbar{
    border-bottom-color:rgba(24,23,20,.08);
  }
  :root{
    --project-header-h:70px;
    --project-header-pad:clamp(20px,6vw,32px);
  }
  .project-shell-center{display:none}
  .brand{width:96px;min-height:36px}
  .project-shell-tools{gap:10px}
  .project-shell-back{
    min-width:34px;
    padding-left:4px;
    padding-right:4px;
    font-size:0;
    letter-spacing:0;
  }
  .project-shell-back::before{
    content:"←";
    font-size:13px;
    line-height:1;
    letter-spacing:0;
  }
  .project-shell-back::after{display:none}
  .project-shell-lang button{
    min-width:32px;
    padding-left:3px;
    padding-right:3px;
    font-size:8px;
    letter-spacing:.12em;
  }
  .project-shell-tools .menu-button{
    padding-left:3px;
    padding-right:0;
    gap:8px;
    font-size:8px;
    letter-spacing:.12em;
  }
  .menu-icon{width:24px;height:11px}
}
@media(max-width:420px){
  :root{--project-header-pad:18px}
  .brand{width:88px}
  .project-shell-tools{gap:7px}
  .project-shell-lang button{min-width:29px}
  .project-shell-tools .menu-button span:first-child{font-size:0}
  .project-shell-tools .menu-button span:first-child::before{
    content:"☰";
    font-size:12px;
    line-height:1;
    letter-spacing:0;
  }
  body[data-project="tierra-habitada"] .project-shell-tools .menu-button span:first-child{
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .project-shell-skip,
  .project-shell-back,
  .project-shell-lang button,
  .topbar,
  .brand-logo,
  .brand img.brand-logo,
  .menu-icon::before,
  .menu-icon::after{
    animation:none;
    transition:none;
  }
}