/* =========================================================
   LOGO OFICIAL — img/logo-beaterio-web-*.png (horizontal)
   Se carga después de styles.css en todas las páginas.
   ========================================================= */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
}

/* Desactivamos los métodos anteriores (pseudo-elementos) */
.logo::before,
.logo::after { content: none !important; display: none !important; }

/* Emblemas antiguos ocultos */
.logo > svg,
.logo > picture { display: none !important; }

/* El logo ya incluye el nombre: el texto queda solo para lectores de pantalla */
.logo .logo-words {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Logo real */
.logo > img.logo-img {
  display: block !important;
  flex-shrink: 0;
  width: auto;
  height: 58px;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 10px rgba(243, 182, 91, 0.25));
  transition:
    transform 0.6s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    filter 0.6s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    height 0.45s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.logo:hover > img.logo-img {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 0 16px rgba(243, 182, 91, 0.5));
}
.header.scrolled .logo > img.logo-img,
.header.header-solid .logo > img.logo-img { height: 48px; }

/* Pie: logo más grande */
.footer .logo > img.logo-img { height: 84px; max-width: 300px; }

/* Si la imagen no carga de ninguna forma, se muestra el nombre en texto */
.logo.logo-noimg > img.logo-img { display: none !important; }
.logo.logo-noimg .logo-words {
  position: static !important;
  width: auto; height: auto;
  overflow: visible;
  clip: auto;
  display: flex;
  flex-direction: column;
}

@media (max-width: 420px) {
  .logo > img.logo-img,
  .header.scrolled .logo > img.logo-img,
  .header.header-solid .logo > img.logo-img { height: 42px; max-width: 160px; }
  .footer .logo > img.logo-img { height: 68px; max-width: 240px; }
}