/* =========================
   ETOILE — Header seguro
   ========================= */

:root {
  --etoile-blanco: #F8F6EF;
  --etoile-verde: #73826C;
  --etoile-logo-ancho: 85px;
}

/* Header */
header {
  background-color: var(--etoile-verde) !important;
  overflow: visible !important;
}

header * {
  overflow: visible !important;
}

/* Ocultar nombre y descripción dentro del logo */
#ss-logo > div {
  display: none !important;
}

/* Ajustar espacio del logo */
#ss-logo {
  gap: 0 !important;
  align-items: center !important;
}

/* Logo */
#ss-logo img {
  width: var(--etoile-logo-ancho) !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Menú */
header nav a,
header a {
  color: var(--etoile-blanco) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: "Noto Sans", Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Íconos */
header svg,
header i {
  color: var(--etoile-blanco) !important;
  fill: var(--etoile-blanco) !important;
}/* Ocultar nombre del sitio junto al logo */
#ss-logo h3,
#ss-logo h3 a {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Eliminar espacio que dejaba el texto */
#ss-logo {
  gap: 0 !important;
}
/* Ocultar nombre del sitio SOLO en escritorio */
@media (min-width: 769px) {
  #ss-logo > div:nth-of-type(1),
  #ss-logo h3,
  #ss-logo h3 a {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #ss-logo {
    gap: 0 !important;
  }
}
/* Agrandar logo en escritorio */
@media (min-width: 769px) {
  #ss-logo img {
    width: 120px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
  }

  #ss-logo a {
    width: 140px !important;
    min-width: 140px !important;
    display: flex !important;
    align-items: center !important;
  }

  #ss-logo {
    min-width: 140px !important;
  }
}