/* ================================
   LUNA GOROJOVSKY – style.css
   ================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:      #ffffff;
  --fg:      #1a1a18;
  --fg-dim:  #9a9490;
  --font-serif:  'Libre Baskerville', Georgia, serif;
  --font-hand:   'Reenie Beanie', cursive;
  --page-padding: clamp(20px, 5vw, 60px);
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 14px;
  overflow-x: auto;
}

body { 
  min-height: 100vh;
  overflow-x: auto;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Header --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--page-padding);
  background: var(--bg);
}

.site-nombre {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.02em;
}

.header-right { display: flex; gap: 24px; }

.nav-link {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  transition: color 0.3s;
}

.nav-link:hover,
.nav-link.active { color: var(--fg); }

/* Tamaños */
.size-s .proyecto-img { width: 140px; height: 190px; }
.size-m .proyecto-img { width: 200px; height: 270px; }

/* Desplazamiento vertical irregular */
.pos-1 { margin-top: 0; }
.pos-2 { margin-top: 60px; }
.pos-3 { margin-top: 20px; }
.pos-4 { margin-top: 100px; }
.pos-5 { margin-top: 40px; }
.pos-6 { margin-top: 80px; }

/* --- Sobre --- */
.sobre-main {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 120px var(--page-padding) 60px;
  max-width: 560px;
}

.sobre-texto p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.8;
}

.contacto-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 6px;
}

.contacto-email {
  font-size: 14px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  transition: border-color 0.3s;
}

.contacto-email:hover { border-color: var(--fg); }

/* --- Footer --- */
footer {
  padding: 20px var(--page-padding);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  border-top: 1px solid #eee;
}

/* --- Tablero absoluto --- */
.tablero {
  position: relative;
  min-height: 1300px;
  min-width: 1400px;
  padding: 80px 0 120px;
}

.proyecto {
  position: absolute;
  display: block;
  cursor: pointer;
}

.proyecto-img {
  overflow: hidden;
  background: #ececec;
}

.proyecto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: grayscale(10%);
}

.proyecto:hover .proyecto-img img {
  transform: scale(1.03);
  filter: grayscale(0%);
}

.proyecto-nombre {
  display: block;
  font-family: var(--font-serif);
  font-size: 7px;
  margin-top: 6px;
  color: var(--fg-dim);
  transition: color 0.3s;
}

.proyecto:hover .proyecto-nombre {
  color: var(--fg);
}

/* --- Responsive Mobile --- */
@media (max-width: 400px) {

  html,
  body {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  overflow-x: auto;
}

  .tablero {
  width: 115vw;
  min-width: 115vw;
  max-width: none;
  min-height: 1900px;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

   /* 1. London Dyke March */
  .proyecto:nth-child(1) { left: -3% !important; top: 50px !important;
                          transform: scale(0.70) !important;
  }

   /* 2. Hospital Borda */
  .proyecto:nth-child(2) { left: 0% !important; top: 300px !important; 
                         transform: scale(0.70) !important;
  }

   /* 3. El Origen de los Fantasmas */
  .proyecto:nth-child(3) { left: 5% !important; top: 670px !important;
                         transform: scale(0.80) !important;
  }

   /* 4. Juana Para Cascara */
  .proyecto:nth-child(4) { left: 54% !important; top: 550px !important;
                         transform: scale(0.80) !important;
  }

   /* 5. Dyke March super 8 */
  .proyecto:nth-child(5) { left: -2% !important; top: 490px !important; 
                         transform: scale(0.70) !important;
  }

   /* 6. Exposiciones */
  .proyecto:nth-child(6) { left: 1% !important; top: 1170px !important; 
                         transform: scale(0.60) !important;
  }

   /* 7. 8ABLA */
  .proyecto:nth-child(7) { left: 31% !important; top: 110px !important;
                         transform: scale(0.70) !important;
   }

   /* 8. Ampliaciones Intervenidas */
  .proyecto:nth-child(8) { left: 68% !important; top: 1570px !important; 
                         transform: scale(0.55) !important;
  }

   /* 9. Juana y Camila */
  .proyecto:nth-child(9) { left: 65% !important; top: 960px !important; 
                         transform: scale(0.60) !important;
  }

   /* 10. Ecos */
  .proyecto:nth-child(10) { left: -4% !important; top: 1340px !important;
                          transform: scale(0.80) !important;
  }

   /* 11. Sin Titulo 16mm */
  .proyecto:nth-child(11) { left: -4% !important; top: 990px !important; 
                          transform: scale(0.75) !important;
  }

   /* 12. Diario */
  .proyecto:nth-child(12) { left: 12% !important; top: 1525px !important;
                          transform: scale(0.70) !important;
  }

   /* 13. Des Bosques Encantados */
  .proyecto:nth-child(13) { left: -1% !important; top: 1685px !important; 
                          transform: scale(0.70) !important;
  }

   /* 14. Codigos por Cascara */
  .proyecto:nth-child(14) { left: 58% !important; top: 1150px !important;
                          transform: scale(0.70) !important;
  }

   /* 15. Berlin S8  */
  .proyecto:nth-child(15) { left: 83% !important; top: 840px !important; 
                          transform: scale(0.80) !important;
  }

   /* 16. Bowen */
  .proyecto:nth-child(16) { left: 79% !important; top: 1320px !important; 
                          transform: scale(0.70) !important;
  }

   /* 17. Anagama Estonia */
  .proyecto:nth-child(17) { left: 3% !important; top: 790px !important; 
                          transform: scale(0.70) !important;
  }

   /* 18. Anagama Super8 */
  .proyecto:nth-child(18) { left: 63% !important; top: 335px !important; 
                          transform: scale(0.80) !important;
  }

/* 19. Retratos Super8 */
  .proyecto:nth-child(19) { left: 72% !important; top: 65px !important; 
                          transform: scale(0.50) !important;
  }