/* =====================================================================
   BRAND LOGO
   Real Ecosabor Tropical logo (transparent PNG) swapped in for the SVG
   mark + wordmark across the nav, footer and preloader, with a soft accent
   glow + hover lift. CSS-only, so it applies to every page (index + all
   options) without touching the markup.
   ===================================================================== */

.brand{
  background:url(../assets/logo-ecosabor.png) left center / contain no-repeat;
  width:88px;height:36px;gap:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.40));
  transition:transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.brand>.mark{display:none}               /* decorative svg mark — hide outright */
.brand>span{                            /* keep the wordmark for screen readers */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.brand:hover{
  transform:translateY(-1px) scale(1.03);
  filter:drop-shadow(0 6px 18px var(--accent-glow));
}

/* footer logo a touch larger */
footer .brand{width:104px;height:42px}

/* preloader: show the logo instead of the line mark, with a gentle pulse */
.pl-mark{
  width:min(200px,56vw);height:80px;
  background:url(../assets/logo-ecosabor.png) center / contain no-repeat;
  animation:logoPulse 2.4s ease-in-out infinite;
}
.pl-mark>*{display:none}                  /* hide the svg strokes */
@keyframes logoPulse{
  0%,100%{opacity:.88;transform:scale(.99);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
  50%{opacity:1;transform:scale(1.02);filter:drop-shadow(0 0 22px var(--accent-glow))}
}
@media(prefers-reduced-motion:reduce){.pl-mark{animation:none}}