/* CONTENEDOR LOGO */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: calc(150px * var(--scroll));
  flex: 0 0 calc(150px * var(--scroll));
  min-width: 0;
  overflow: visible;
}

.logo img {
  width: calc(150px - (8px * var(--scroll)));
  height: auto;
  flex-shrink: 0;
}

/* ICONO OCULTO AL INICIO */
.logo-icono {
  display: none;
}

/* SVG */
.logo-icono svg {
  width: 100%;
  height: 100%;
  stroke: #1d4ed8;
  stroke-width: 1.3;
  fill: none;
}

/* OPCIONAL: logo se separa un poco */
.header.scrolled .logo {
  gap: 0;
}

.logo img {
  transform: translateY(0);
}

.header.scrolled .logo img {
  transform: translateY(-2px);
}

.logo-header,
.logo-icono {
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.05s;
}

.logo-header {
  width: 142px;
  height: auto;
  flex-shrink: 0;

  opacity: var(--scroll);
  transform: 
    scale(calc(0.8 + (0.2 * var(--scroll))))
    translateY(calc(10px - (10px * var(--scroll))));
}

/* CUANDO SE ACTIVA */
.header.visible .logo-header {
  opacity: 1;
  transform: scale(1) translateY(0);
}