/* Base Styles replicating minimalist aesthetic */
:root {
  --font-main:"proxima-nova",sans-serif;
  --color-text:#111;
  --color-accent:#c01818; /* red accent similar tone */
  --ease:cubic-bezier(.4,.0,.2,1);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--font-main); font-weight:300; line-height:1.35; color:var(--color-text); background:#fff; -webkit-font-smoothing:antialiased; }

.site-header { position:fixed; top:0; left:0; padding:18px 24px 12px; z-index:50; font-size:26px; line-height:1.05; letter-spacing:.5px; }
.site-header .site-title { text-decoration:none; color:var(--color-text); display:inline-flex; flex-direction:column; font-weight:300; }
.site-header .site-title span { pointer-events:none; }
/* Emphasize last line 'Estudio' */
.site-header .site-title span:last-child { font-weight:500; }

.city-map { position:relative; width:100vw; height:100vh; overflow:hidden; }
.map-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; image-rendering:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.map-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }

.project { position:relative; }
.project path { fill:rgba(0,150,0,0); stroke:none; transition:fill .35s var(--ease), stroke .35s var(--ease); cursor:pointer; }
.project:hover path, .project:focus path { fill:rgba(80,170,60,.55); stroke:rgba(80,170,60,.8); stroke-width:1; }
.project:focus { outline:none; }

/* Tooltip label (accessible offscreen alternative handled via title) */
.map-svg .project-label { pointer-events:none; font-size:12px; font-family:var(--font-main); fill:#111; }

/* Optional subtle hover glow */
.project:hover path { filter:drop-shadow(0 0 6px rgba(70,160,60,.6)); }

.bottom-bar { position:fixed; left:0; bottom:0; width:100%; display:flex; flex-direction:column; gap:0; padding:6px 20px 10px; align-items:flex-start; font-size:14px; z-index:60; background:#fff; }
.bottom-bar button, .bottom-bar a { font-family:var(--font-main); font-weight:300; background:none; border:none; padding:0; margin:0; cursor:pointer; color:var(--color-text); font-size:15px; letter-spacing:.5px; }
.menu-toggle { display:inline-flex; align-items:center; gap:8px; background:#fff; padding:8px 18px 10px 12px; font-size:26px; line-height:1; }
.menu-toggle .symbol { display:inline-block; width:20px; text-align:center; transition:transform .4s var(--ease); font-size:26px; }
.menu-toggle[aria-expanded="true"] .symbol { transform:rotate(45deg); }

.site-menu { animation:fadeIn .4s var(--ease); opacity:1; transition:opacity .35s var(--ease); }
.bottom-bar.closing .site-menu { opacity:0; }
.bottom-bar { transition:max-height .5s var(--ease); overflow:hidden; }
.bottom-bar:not(.open) { max-height:68px; }
.bottom-bar.open { max-height:340px; }
.site-menu ul { list-style:none; padding:10px 0 8px; margin:0; }
.site-menu li { margin:14px 0; }
.site-menu a { text-decoration:none; color:var(--color-text); font-size:16px; }
.site-menu a:hover { color:var(--color-accent); }

@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to {opacity:1; transform:translateY(0);} }

/* Project Page */
body.page--project { padding:0; }
.project-wrapper { min-height:100vh; display:flex; flex-direction:column; }
.project-media { flex:1; display:flex; align-items:center; justify-content:center; padding:140px 0 140px; }
.project-media img { max-width:360px; width:100%; height:auto; display:block; }
.project-meta-bar { position:fixed; bottom:0; left:0; width:100%; display:flex; gap:60px; padding:10px 22px 16px; font-size:14px; background:#fff; }
.page--project .bottom-bar + .project-meta-bar { bottom:56px; transition:bottom .5s var(--ease); }
.page--project .bottom-bar.open + .project-meta-bar { bottom:340px; }
.project-meta-bar .block { white-space:nowrap; }
.project-meta-bar .block button { all:unset; cursor:pointer; display:inline-flex; gap:4px; }
.project-meta-bar .block button .symbol { width:12px; display:inline-block; text-align:center; transition:transform .4s var(--ease); }
.project-meta-bar .block button[aria-expanded="true"] .symbol { transform:rotate(45deg); }
.project-meta-bar .panel { font-size:14px; margin-top:10px; animation:fadeIn .4s var(--ease); }
.project-meta-bar em { font-style:italic; }

@media (max-width:860px) {
  .site-header { font-size:22px; }
  .project-media { padding-top:180px; }
  .project-media img { max-width:280px; }
  .bottom-bar { flex-wrap:wrap; }
  .project-meta-bar { flex-direction:column; gap:12px; }
  .page--project .bottom-bar + .project-meta-bar { bottom:68px; }
  .page--project .bottom-bar.open + .project-meta-bar { bottom:360px; }
}