/* ===== SLOGAN HEADER IZQUIERDA ===== */
div.slogan{
	float: left;
	width: 350px;
	font-size: 14px;
}


.masthead .slogan {
  top: 50%;
  left: 0;
  max-width: 320px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--fenix-primary, #ff6a00);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

/* En móviles, lo ponemos arriba y centrado */
@media (max-width: 768px) {
  .masthead .slogan {
    position: static;
    transform: none;
    margin-bottom: 1.5rem;
    max-width: 100%;
    text-align: center;

    border-left: none;
    border-radius: 12px;
  }
}

/* Al scrollear: cambia tamaño y visibilidad */
#mainNav.navbar-scrolled ~ .site-logo .site-logo__img,
.site-logo.scrolled .site-logo__img{
  height:55px;
  margin-top: 0px;
}
#mainNav.navbar-scrolled ~ .site-logo .site-logo__img--light,
.site-logo.scrolled .site-logo__img--light{ opacity:0; pointer-events:none; }
#mainNav.navbar-scrolled ~ .site-logo .site-logo__img--dark,
.site-logo.scrolled .site-logo__img--dark{ opacity:1; pointer-events:auto; }


/* Cuando entra el modo móvil (toggler visible) */
@media (max-width: 991.98px) {
  .site-logo {
    left: auto;
    right: 12px;   /* pega el logo al lado derecho */
    transform: none; /* elimina el centrado */
  }
}

/* Contenedor de botones en el header */
.masthead .btn-group-fenix {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center; /* centrado en desktop */
}