/* ── NAVBAR + FOOTER COMPARTIDOS ──────────────────────────────────────────
   Usado por index.php, privacy.php y terms.php. Editar aquí afecta a
   todas las páginas que enlacen esta hoja de estilos. */

:root {
  --gold: #C08A34;
  --gold-light: #DFB35C;
  --dark-green: #09221E;
  --off-white: #F8F6F2;
  --cream: #EEE9E0;
  --white: #FFFFFF;
  --text-dark: #1a1a1a;
  --text-mid: #4a4a4a;
  --border: rgba(192, 138, 52, 0.25);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
}

/* ─── SHARED LAYOUT CONTAINER (also wraps the footer content) ─── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* ─── LANGUAGE DROPDOWN IN NAV ─── */
.lang-dropdown {
  position: relative;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-dark);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  transition: all 0.2s;
  user-select: none;
  text-transform: uppercase;
}

.lang-trigger:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.lang-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  vertical-align: middle;
}

.lang-trigger .lang-caret {
  font-size: 9px;
  opacity: 0.5;
  margin-left: 2px;
  transition: transform 0.2s;
}

.lang-dropdown.open .lang-trigger {
  border-color: var(--gold);
  color: var(--gold);
}

.lang-dropdown.open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  min-width: 160px;
  padding: 8px 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  z-index: 200;
}

.lang-dropdown.open .lang-menu {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
  text-transform: uppercase;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.lang-option:hover {
  color: var(--gold);
  padding-left: 24px;
}

.lang-option.active {
  color: var(--gold);
  font-weight: 500;
}

.flag-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ─── NAVBAR ─── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 80px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s;
}

/* Dims the navbar's own chrome (logo, language switcher) while the mobile
   panel is open, in step with .mobile-nav-overlay dimming the rest of the
   page. Lives inside nav (instead of relying on the external overlay) so it
   stays below the hamburger/panel within nav's own stacking context. */
nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

nav.menu-open::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

nav.scrolled {
  top: 0;
  height: 70px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08);
}

.nav-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

.nav-logo {
  height: 55px;
  width: auto;
  transition: height 0.3s;
}

nav.scrolled .nav-logo {
  height: 46px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.nav-links li {
  position: relative;
}

.nav-links>li>a {
  display: block;
  padding: 10px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links>li>a:hover {
  color: var(--gold);
}

.nav-links li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-top: 2px solid var(--gold);
  min-width: 220px;
  padding: 10px 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.nav-links li:hover .dropdown {
  display: block;
}

.dropdown a {
  display: block;
  padding: 8px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}

.dropdown a:hover {
  color: var(--gold);
  padding-left: 28px;
}

.nav-contact {
  background: var(--gold);
  color: var(--dark-green) !important;
  padding: 10px 22px !important;
  border-radius: var(--r-sm) !important;
}

.nav-contact:hover {
  background: var(--dark-green);
  color: var(--gold-light) !important;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-dark);
  transition: all 0.3s;
}

/* Morphs into an X when the panel is open (state driven by aria-expanded,
   already kept in sync by toggleMenu() in i18n.js). */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav-overlay {
  display: none;
}

@media (max-width: 1250px) {
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(300px, 82vw);
    background: white;
    padding: 100px 24px 24px;
    gap: 4px;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    z-index: 2;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .hamburger {
    display: flex;
    z-index: 2;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
  }
}

@media (max-width: 768px) {
  nav {
    padding: 0 20px;
  }
}

/* Por debajo de ~400px, el logo (ancho fijo por su relación de aspecto,
   sólo se controla su alto) más el selector de idioma y el botón de
   hamburguesa ya no caben en una sola fila; sin espacio para achicarse,
   el hamburguesa terminaba empujado fuera de la pantalla. Aquí el logo
   se va reduciendo en proporción al ancho disponible (manteniendo su
   relación de aspecto, sin deformarse) para dejarles sitio. El punto de
   corte es 400px porque es justo donde deja de sobrar espacio con el
   logo a tamaño completo. */
@media (max-width: 400px) {
  .nav-logo {
    height: clamp(30px, 24vw - 41px, 55px);
  }

  nav.scrolled .nav-logo {
    height: clamp(25px, 20vw - 34px, 46px);
  }
}

/* ─── FOOTER ─── */
footer {
  background: var(--dark-green);
  padding: 60px 0 30px;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(192, 138, 52, 0.05) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(192, 138, 52, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(192, 138, 52, 0.2);
  position: relative;
  z-index: 1;
}

.footer-logo-img {
  width: 180px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  max-width: 320px;
}

.footer-col-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.04em;
}

.footer-links a:hover {
  color: var(--gold-light);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  position: relative;
  z-index: 1;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.06em;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.02);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.footer-social a svg {
  width: 18px;
  height: 18px;
}

.footer-social a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(192, 138, 52, 0.08);
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(192, 138, 52, 0.18);
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}