/* Shared across the public site, loaded after style.css: colour tokens,
   the header and the footer (same as the home). */

:root {
  --bg: #0B0A09;
  --bg-2: #141312;
  --line: #2A2927;
  --ink: #F8F4EE;
  --ink-2: #C9C2B8;
  --ink-3: #8A847C;
  --orange: #EC8806;
  --orange-2: #F5A23A;
  --dark: #141312;
  --pad-x: clamp(24px, 7vw, 120px);
}

/* ---------- Type ---------- */
/* Same display style as the home: heavier, slightly wide, tight tracking */
h1, h2 { font-weight: 800; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.08; }
h3 { font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }

/* ---------- Header ---------- */
.gh-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(16px, 4vw, 48px);
  transition: background .4s ease;
}
.gh-logo { display: flex; align-items: center; }
.gh-logo img { height: 34px; width: auto; display: block; }
.gh-links { display: flex; gap: 26px; align-items: center; font-size: 14px; font-weight: 500; }
.gh-nav a { color: var(--ink); }
.gh-nav-right { display: flex; gap: 14px; align-items: center; font-size: 13px; font-weight: 600; }
.gh-langs { display: flex; gap: 14px; }
.gh-langs a { opacity: .6; }
.gh-langs a.active { opacity: 1; }
.gh-menu-btn {
  display: none;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  padding: 6px 14px;
  cursor: pointer;
}
.gh-nav a { text-decoration: none; }
.gh-links a { transition: color .2s ease; }
.gh-links a.active { color: var(--orange) !important; }
/* Pages with a light background get the header bar from the start */
.gh-nav--solid {
  background: rgba(20,19,18,.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.gh-nav--solid.open { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Footer ---------- */
.gh-footer {
  position: relative;
  background: var(--bg-2);
  color: #B8B1A8;
  border-top: 1px solid var(--line);
  padding: 28px clamp(24px, 6vw, 100px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.gh-footer a { color: #B8B1A8; text-decoration: none; }
.gh-footer a:hover { color: var(--orange-2); }

@media (max-width: 900px) {
  .gh-menu-btn { display: block; }
  .gh-links {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    font-size: 22px;
    font-weight: 700;
    background: rgba(11,10,9,.98);
  }
  /* Above the page's floating buttons while open */
  .gh-nav.open { z-index: 1000; }
  .gh-nav.open .gh-links { display: flex; }
  .gh-nav.open a, .gh-nav.open .gh-menu-btn { color: var(--ink) !important; }
  .gh-nav.open .gh-links a.active { color: var(--orange) !important; }
}

/* Phones/tablets: the orange "Reserva" bar is the one fixed button (the round
   WhatsApp button sat on top of text), and the page leaves room for it. */
@media (max-width: 1024px) {
  .whatsapp-float { display: none !important; }
  body { padding-bottom: 52px; }
  .sticky-cta a { color: var(--dark); }
}