.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.logo__icono {
  width: 2.25rem;
  height: auto;
  flex-shrink: 0;
}

.logo__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo__marca {
  font-size: var(--fs-md);
  font-weight: 400;
}

.logo__marca strong {
  font-weight: 800;
}

.logo__ciudad {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Variante clara: fondo claro, icono y texto en azul marino / marca. */
.logo--claro {
  color: var(--c-text-dark);
}

.logo--claro .logo__icono {
  color: var(--c-brand);
}

.logo--claro .logo__marca strong {
  color: var(--c-brand);
}

/* Variante oscura: fondo oscuro, icono y "Cars" con brillo neón. */
.logo--oscuro {
  color: var(--c-white);
}

.logo--oscuro .logo__icono {
  color: var(--c-neon);
  filter: drop-shadow(var(--glow-neon-sm));
}

.logo--oscuro .logo__marca strong {
  color: var(--c-neon);
  text-shadow: var(--glow-neon-sm);
}

.logo--oscuro .logo__ciudad {
  color: var(--c-text-muted-light);
}

/* Tamaño grande, para el hero. */
.logo--grande .logo__icono {
  width: 3.5rem;
}

.logo--grande .logo__marca {
  font-size: var(--fs-2xl);
}

.logo--grande .logo__ciudad {
  font-size: var(--fs-sm);
}

.logo--grande.logo--oscuro .logo__icono {
  filter: drop-shadow(var(--glow-neon-md));
}

.logo--grande.logo--oscuro .logo__marca strong {
  text-shadow: var(--glow-neon-md);
}

@media (min-width: 768px) {
  .logo--grande .logo__icono {
    width: 4.5rem;
  }

  .logo--grande .logo__marca {
    font-size: var(--fs-3xl);
  }
}