/* ============================================================
   HEADER & MENU — todas las páginas
   ============================================================ */

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

:root {
  --ink:      #1a1816;
  --stone:    #3d3b37;
  --dust:     #8a8880;
  --linen:    #e8e4dc;
  --cream:    #f5f2ec;
  --cg:       'Cormorant Garamond', serif;
  --header-h: 130px;
  --gutter:    48px;  /* padding horizontal de página (desktop) */
  --gutter-sm: 24px;  /* padding horizontal de página (móvil ≤900px) */
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  18px;
  --space-md:  32px;
  --space-lg:  48px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 120px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── SITE HEADER ──
   z-index: 500 — siempre por encima de todo,
   incluyendo las fotos del hero (que tienen z-index: 1)        */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  z-index: 500;
  transition: height 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              background 0.4s;
}
.site-header.scrolled {
  height: 80px;
  background: rgba(245,242,236,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--linen);
}

.header-left {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
}
.header-right {
  display: flex;
  justify-content: flex-end;
}

/* LOGO — centrado */
.site-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.site-logo .gus {
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: 54px;
  color: var(--ink);
  line-height: 0.88;
  letter-spacing: -0.01em;
  transition: font-size 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.site-logo .full {
  font-size: 8.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--dust);
  margin-top: 8px;
  transition: margin-top 0.4s;
}
.site-header.scrolled .site-logo .gus  { font-size: 36px; }
.site-header.scrolled .site-logo .full { margin-top: 5px; }

/* Menu button */
.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 4px 0;
  transition: color 0.2s;
}
.menu-btn:hover { color: var(--ink); }

/* ── MENU OVERLAY ── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 600; /* por encima del header */
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Header dentro del overlay */
.ov-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
}
.ov-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.ov-logo .gus {
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: 54px;
  color: var(--cream);
  line-height: 0.88;
}
.ov-logo .full {
  font-size: 8.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.3);
  margin-top: 8px;
}

.ov-close-wrap { display: flex; justify-content: flex-end; }
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.45);
  padding: 4px 0;
  transition: color 0.2s;
}
.close-btn:hover { color: var(--cream); }

/* Links centrados */
.ov-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 10;
  margin-top: 20px;
}
.ov-link {
  font-family: var(--cg);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 80px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
              color 0.35s ease,
              letter-spacing 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
  display: block;
  text-align: center;
}
.ov-link:hover {
  color: var(--dust);
  letter-spacing: 0.18em;
}
.ov-link-active { color: rgba(245,242,236,0.3); pointer-events: none; }

.menu-overlay.open .ov-link:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.09s; }
.menu-overlay.open .ov-link:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.15s; }
.menu-overlay.open .ov-link:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.21s; }
.menu-overlay.open .ov-link:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.27s; }
.menu-overlay.open .ov-link:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.33s; }

/* Footer del menú */
.ov-footer {
  position: absolute;
  bottom: 28px;
  left: var(--gutter); right: var(--gutter);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.4s ease 0.38s;
}
.menu-overlay.open .ov-footer { opacity: 1; }
.ov-footer span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.65);
}
.ov-footer span a { color: rgba(245,242,236,0.65); transition: color 0.2s; }
.ov-footer span a:hover { color: var(--cream); }

/* ── FOTOS HERO — siempre bajo el header ── */
.hero-photo {
  z-index: 1 !important;
}

/* ── ANIMACIÓN DE PRIMERA CARGA ──
   El hero empieza invisible y aparece una vez que el layout
   JS ha calculado todas las posiciones correctas           */
.hero {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero.loaded {
  opacity: 1;
}

/* ── WIDE SCREENS — more editorial air per STYLEGUIDE § 2.3 ──
   On screens ≥1280px the page gutter and section gaps grow so the
   layout feels more "revista de lujo". Implemented as token overrides
   in :root so every place that uses var(--gutter) / var(--space-xl)
   picks up the new values automatically. */
@media (min-width: 1280px) {
  :root {
    --gutter:   64px;  /* base: 48px → wider page padding */
    --space-xl: 96px;  /* base: 64px → bigger gaps between sections */
  }
}

/* ── RESPONSIVE ── */

/* Tablet */
@media (max-width: 1024px) {
  :root { --header-h: 110px; }
  .site-header { padding: 0 32px; }
  .site-logo .gus { font-size: 44px; }
  .ov-header { padding: 0 32px; }
  .ov-logo .gus { font-size: 44px; }
  .ov-footer { left: 32px; right: 32px; }
}

/* Móvil */
@media (max-width: 768px) {
  :root { --header-h: 80px; }

  /* Header: logo izquierda, menu derecha — mismo margen en ambos lados */
  .site-header {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Quita header-left del flujo para que logo y menu queden en los extremos */
  .header-left { display: none; }

  .site-logo .gus  { font-size: 34px; }
  .site-logo .full { font-size: 7px; margin-top: 5px; }
  .site-header.scrolled .site-logo .gus { font-size: 26px; }

  .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .menu-btn {
    font-size: 9px;
    letter-spacing: 0.18em;
    padding: 8px 0 8px 16px;
  }

  /* Overlay móvil */
  .ov-header {
    padding: 0 20px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Esconde el div vacío del overlay para que logo y close queden en extremos */
  .ov-header > div:first-child { display: none; }
  .ov-logo .gus  { font-size: 34px; }
  .ov-logo .full { font-size: 7px; }

  .close-btn {
    font-size: 9px;
    padding: 8px 0 8px 16px;
  }

  .ov-link { font-size: clamp(32px, 11vw, 52px); }

  .ov-footer {
    left: 20px; right: 20px;
    bottom: 20px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .ov-link { font-size: 30px; }
  .site-logo .gus { font-size: 30px; }
}