/* =========================================================
   HEADER — nueva identidad visual (barra granate + CTA naranjo)
   Reestiliza el menú ya existente en cada template-part
   (.site_nav / #site_nav_clone), sin duplicar markup.
   ========================================================= */
:root{
  --header-maroon-dark: #3a0f18;
  --header-maroon: #711c2e;
  --header-orange: #d9722c;
  --header-orange-dark: #b85f23;
}

/* ---------- Topbar (agregada en header.php) ---------- */
.topbar{
  background-color: var(--header-maroon-dark);
  color: #f3e3e6;
  font-size: 0.85rem;
  position: relative;
  z-index: 1001;
}
.topbar_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em calc(4% + 1cm) !important;
  flex-wrap: wrap;
  gap: 0.5em;
}
.topbar_contact{display: flex; align-items: center; gap: 1.5em;}
.topbar_contact a{color: #f3e3e6; text-decoration: none; opacity: .9;}
.topbar_contact a:hover{opacity: 1; text-decoration: underline;}
.topbar_contact i{margin-right: .4em;}

.topbar_lang{display: flex; align-items: center; gap: .4em;}
.topbar_lang a[data-gt-lang]{
  display: inline-block;
  padding: .25em .7em;
  border-radius: .3em;
  color: #e7b8c2;
  text-decoration: none;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.topbar_lang a[data-gt-lang]:hover{
  background-color: rgba(255,255,255,.1);
  color: #fff;
}
.topbar_lang a[data-gt-lang].gt-current-lang{
  background-color: rgba(255,255,255,.16);
  color: #fff;
}

/* ---------- Navbar principal (ya existe en content-*.php) ---------- */
.site_nav{
  background-color: var(--header-maroon) !important;
  padding-left: calc(4% + 1cm) !important;
  padding-right: calc(4% + 1cm) !important;
  box-sizing: border-box !important;
}
.site_nav .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* El logo activo suele ser el custom-logo (color granate); lo
   convertimos a blanco para que se lea sobre el fondo granate. */
.site_nav .navbar-brand img{
  filter: brightness(0) invert(1);
  max-height: 2.6em;
  width: auto;
}
#site_nav_clone .navbar-brand img{
  max-height: 2.1em;
}

.site_nav .nav_element{
  font-weight: 600;
}

/* Agrupar menú + botón a la derecha, pegados entre sí, dejando
   solo el logo a la izquierda con espacio de por medio. */
.site_nav .navbar-brand{
  margin-right: auto;
}
.site_nav .navbar-collapse{
  flex-grow: 0;
}
.site_nav.navbar-expand-lg .navbar-collapse{
  justify-content: flex-end !important;
}
.site_nav .elemento_escritorio{
  margin-left: 1.5em;
}

/* Botón principal del menú ("Contacto"/CTA) en naranjo */
.site_nav .elemento_escritorio .btn__primary,
.site_nav .elemento_escritorio .btn_.btn__primary{
  background: var(--header-orange) !important;
  border-color: var(--header-orange) !important;
  color: #fff !important;
  border-radius: .5em !important;
}
.site_nav .elemento_escritorio .btn__primary:hover,
.site_nav .elemento_escritorio .btn_.btn__primary:hover{
  background: var(--header-orange-dark) !important;
  border-color: var(--header-orange-dark) !important;
}

.navbar-toggler{border-color: rgba(255,255,255,.4);}
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Header clonado (sticky al hacer scroll) ---------- */
#site_nav_clone{
  padding: 0.3em 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .topbar_contact{gap: 1em;}
  .navbar-collapse{
    background-color: var(--header-maroon);
    margin-top: .8em;
    padding: .8em 0;
    border-radius: .4em;
  }
  /* En pantallas angostas el margen extra de 1cm ya no cabe:
     se reduce a un porcentaje simple para no generar scroll
     horizontal ni tapar el botón de menú. */
  .topbar_inner{
    padding: 0.6em 5% !important;
  }
  .site_nav{
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

@media (max-width: 480px){
  .topbar_contact a:nth-child(1){display: none;}
}